Interpretation and usage of various React state managers

import { createStore } from 'redux'
const store = createStore(fn)

const state = store.getState()

const action = {
    type: 'ADD_TODO',
    payload: 'Learc Redux' //The payload here is passed in as a parameter, you can leave it blank}

store.dispatch({
    type: 'ADD_TODO'
})

const reducer = (state = {
  count: 10 //Set the initial value for the property in state. Since the state manager will be cleared after each refresh, we can get the last stored value from the local as the initial value.}, action) => {
  switch (action.type) {
    case 'REDUCE':
          // Here we can see that we use the action type value as the key value to search. When dispatching, we can find the operation to be executed based on the judgment of these key values. return { ...state, count: state.count - action.payload }
          //According to the needs of the action, we return a new state object based on the original state without modifying the original state
    case 'ADD':
      return { ...state, count: state.count + action.payload }
   
    default:
      return state;
  }
}
 
export default reducer

yarn add immutable -S

import { Map } from 'immutable' //Introduce Map function const user = (state = Map({ //Use Map to deeply copy state
  isLogin: localStorage.getItem('isLogin') === 'true',    
  token: localStorage.getItem('token') || '',
  adminname: localStorage.getItem('adminname') || '',
  role: localStorage.getItem('role') * 1 || 1
}), action) => {
  switch (action.type) {
    case 'CHANGE_LOGIN_STATE':
      return state.set('isLogin', action.payload) //Write case 'CHANGE_TOKEN' in set mode:
      return state.set('token', action.payload)
    case 'CHANGE_ADMIN_NAME':
      return state.set('adminname', action.payload)
    case 'CHANGE_ROLE':
      return state.set('role', action.payload)
    default:
      return state
  }
}

export default user

state => {
    return {
        adminname: state.getIn(['user', 'adminname']), // Get the value using get method, the parameters are in this format // The meaning of the first parameter: user in the state manager // The meaning of the second parameter: the state/attribute named adminname}
}

import { createStore, combineReducers } from "redux";
// This combineReducers method is the key to modular development. It helps us merge all the state managers of the modules together. import pro from './modules/pro'
import app from './modules/app'
 
const reducer = combineReducers({ //Concentrate all reducers created by submodules into this reducer
  pro, app
})
 
const store = createStore(reducer)
 
export default store

// You can 'link' the state manager in the component through provider and connect. After the link is successful, you can use the states and methods in the state manager. // /src/xxx/index.jsx
import {connect} from 'react-redux'
 
function App (props) {
    ...
}
export default connect(mapStateToProps, mapDispatchToProps)(App)
     
// /index.js
import {Provider} from 'react-redux'
import App from './App.jsx'
import store './store/index.js'
     
ReactDom.render (
    <React.StrictMode>
        <Provider store = { store }>
            <App />
        </Provider>
    </React.StrickMode>
)
 
//You can also use the decorator's high-order function @connect @withRouter
 
//In the past, the corresponding data was taken from the state tree, and then passed to the component through props using the connect() method that comes with react-redux class Home extends React.Component {
    //....
}
export default connect(state => ({todos: state.todos}))(Home);
 
//If you use decorators, it becomes like this, which doesn't seem that complicated @connect(state => ({ todos: state.todos }))
class Home extends React.Component {
    //....
}

const App = (props) => {
    // The component can directly access the state props.adminname in the state manager through props
    props.count
    props.bannerList
    props.reduceFn
    ...
}
export default connect(
    // You can see that two functions are passed in here and two functions are returned state => {
        return {
            adminname: state.getIn(['user', 'adminname']), //This is a way to store state, we will talk about count later: state.app.count, //The parameter is state, we pass the count property in the app state manager to the count in props
            bannerList: state.pro.bannerList,
        }
    },
    dispatch => {
        return {
            reduceFn () { //We define a reduceFn here, which contains the dispatch method. We can use the reduceFn method in props to send the information submitted by 'REDUCE' dispatch({
                    type: 'REDUCE',
                    payload: 5 //payload is a parameter, it can be omitted})
            }
        }
    }
)(App)

//Introduce thunk in store.js and mount it into the state manager import { createStore, combineReducers, applyMiddleware} from 'redux'
 
import thunk from 'redux-thunk'
import app from './modules/app'
import pro from './modules/pro'
 
const reducer = combineReducers({
  app, pro
})
//Mount thunk to the state manager through applyMiddleware const store = createStore(reducer, applyMiddleware(thunk))
 
export default store

// .../store/actionCreator/pro.js
 
// This file is specifically used to trigger asynchronous operations // When the thunk module is executed, the actionCreator function has a default parameter of dispatch
// This dispatch can be used to trigger the reducer
// Sometimes when triggering asynchronous, you need to pass parameters. In this case, you can return an actionCreator function inside the function const actions = {
  getBannerListAction (dispatch) {
    fetch('http://121.89.205.189/api/banner/list')
    .then(res => res.json())
    .then(res => {
      dispatch({
        type: 'CHANGE_BANNER_LIST',
        payload: res.data
      })
    })
  },
  getProListAction (count) { //With parameters, returns a function, the function parameter defaults to dispatch
    count = count || 1
    return function (dispatch) {
      fetch('http://121.89.205.189/api/pro/list?count=' + count)
      .then(res => res.json())
      .then(res => {
        dispatch({
          type: 'CHANGE_PRO_LIST',
          payload: res.data
        })
      })
    }
  }
}
 
export default actions

import actions from './store/actionCreator/pro'
const App = (props) => {
    // props.reduceFn() can be directly accessed from props
    props.addFn()
    props.getBannerList()
    props.getProList()
}
 
const mapStateToProps = (state) => {
  return {
    count: state.app.count,
    bannerList: state.pro.bannerList,
    proList: state.pro.proList
  }
}
 
const mapDispatchToProps = (dispatch) => {
  return {
    reduceFn () { //Modify the state in the normal way dispatch({       
        type: 'REDUCE',
        Payload: 5
      })
    },
    addFn () {
      dispatch({
        type: 'ADD',
        Payload: 5
      })
    },
    getBannerList () { //Modify the status through thunk method dispatch(actions.getBannerListAction)
    },
    getProList () {
      dispatch(actions.getProListAction(2))
    }
  }
}
 
export default connect(mapStateToProps, mapDispatchToProps)(App)

yarn add redux-saga immutable redux-immutable -S

import { createStore, combineReducers, applyMiddleware } from 'redux'
 
import createSagaMiddleware from 'redux-saga'
 
import mySaga from './mySaga' //Asynchronous operation instructions import home from './modules/home'
import app from './modules/app'
 
const reducer = combineReducers({
  app,
  home
})
 
const sagaMiddleware = createSagaMiddleware() //Generate saga middleware const store = createStore(reducer, applyMiddleware(sagaMiddleware))
//Establish a link //Like thunk, mount the saga middleware to the state manager and you can use the saga method to modify the state sagaMiddleware.run(mySaga)
//run: Send // Here is a mySage function encapsulated as a function to modify the state export default store

import { call, put, takeLatest } from 'redux-saga/effects'
 
import { getBannerList, getProList } from '../api/home'
 
// redux-saga ---> Must be used with generator function function * getBannerListAction() {
  const res = yield call(getBannerList) //call--call function yield put({
    type: 'CHANGE_BANNER_LIST',
    payload: res.data
  })
}
function * getProListAction (action) {
  const res = yield call(getProList, action.payload)
  yield put({
    type: 'CHANGE_PRO_LIST',
    payload: res.data
  })
}
 
function * mySaga () {
  yield takeLatest('REQUEST_BANNER_LIST', getBannerListAction)
  yield takeLatest('REQUEST_PRO_LIST', getProListAction)
}
 
export default mySaga

// In the mysaga file, we define the sending method import { takeLatest } from 'redux-saga/effects'
// takeLatest --- Assign tasks; below. We define the key and assign events to it. These events are the functions used by the store.dispatch() function. * getProListAction (action){
  const res = yield call(getProList, action.payload)
  yield put({
    type: 'CHANGE_PRO_LIST',
    payload: res.data
  })
}
function * mySaga () {
  yield takeLatest('REQUEST_PRO_LIST', getProListAction)
}
 
// When we want to modify the status in the future, we don't need to use store.dispatch() to modify it. // We can use the key value defined in this file to modify it. // We define a custom function in the component's connect like this, and call the modification method dispatch here directly according to the key value => {
    dispatch({ type: 'REQUEST_PRO_LIST'})
}
 
 
// put, call
// call ---> means to call // put ---> means to push, push the current action to the next one to be executed (queue).
 
yield put(action)
yield call(fn)