React各种状态管理器的解读及使用方法

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

const state = store.getState()

const action = {
    type: 'ADD_TODO',
    payload: 'Learc Redux'  //这里的payload是作为参数传入的，可以不写
}

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

const reducer = (state = {
  count: 10 //给state中的属性设置初始值，因为状态管理器在每次刷新后都会清空，我们可以从本地获取上次存储的值作为初始值
}, action) => {
  switch (action.type) {
    case 'REDUCE':
          //    这里可以看到我们根据action的type值作为key值进行查找，当dispatch的时候，就可以根据这些key值的判断查找到要执行的操作
      return { ...state, count: state.count - action.payload }
          //我们根据action的需要，在原有的state基础上，返回了一个新的state对象，没有修改原来的state
    case 'ADD':
      return { ...state, count: state.count + action.payload }
   
    default:
      return state;
  }
}
 
export default reducer

yarn add immutable -S

import { Map } from 'immutable'        //引入Map函数

const user = (state = Map({        //使用Map深拷贝了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)    //set方式写入
    case 'CHANGE_TOKEN':
      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方式获取值， 参数是这种形式
            //第一个参数的含义： user状态管理器中的
            //第二个参数含义： 名为adminname的状态/属性
    }
}

import { createStore, combineReducers } from "redux";
// 这个combineReducers方法就是模块化开发的关键，它帮助我们把所有分模块的状态管理器合并到一起
import pro from './modules/pro'
import app from './modules/app'
 
const reducer = combineReducers({   //把分模块创建的所有reducer都集中到这里的reducer
  pro, app
})
 
const store = createStore(reducer)
 
export default store

// 可以通过provider和connect在组件中对状态管理器进行‘链接'，链接成功之后就可以使用状态管理器中的状态和方法了
 
// /src/xxx/index.jsx
import {connect} from 'react-redux'
 
function App (props) {
    ...
}
export default connet(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>
)
 
//也可以使用到装饰器的高阶函数 @connect @withRouter
 
//以往从状态树取出对应的数据，让后通过props传给组件使用通过react-redux自带的connect()方法
class Home extends React.Component {
    //....
}
export default connect(state => ({todos: state.todos}))(Home);
 
//使用装饰器的话就变成这样，好像没那么复杂
@connect(state => ({ todos: state.todos }))
class Home extends React.Component {
    //....
}

const App = (props) => {
    // 组件中直接就可以通过props访问到状态管理器中的状态
    props.adminname
    props.count
    props.bannerList
    props.reduceFn
    ...
}
export default connect(
    // 可以看到这里就是传入两个函数，返回两个函数
    state => {
        return {
            adminname: state.getIn(['user', 'adminname']),  //这是一种存储状态的方式，一会会讲到
            count: state.app.count,     //参数是state，我们把app状态管理器中的count属性传递到props中的count
            bannerList: state.pro.bannerList,
        }
    },
    dispatch => {
        return {
            reduceFn () {   //我们在这里定义了一个reduceFn，里面是dispatch的方法，我们在props中就可以通过reduceFn这个方法发送'REDUCE'提交的信息
                dispatch({
                    type: 'REDUCE',
                    payload: 5  //payload为参数，可以不传
                })
            }
        }
    }
)(App)

//在store.js之中把thunk引入并挂载到状态管理器中
 
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
})
// 通过applyMiddleware将thunk挂载到状态管理器
const store = createStore(reducer, applyMiddleware(thunk))
 
export default store

// .../store/actionCreator/pro.js
 
// 这个文件就是专门用来触发异步操作
// thunk模块执行的时候， actionCreator 函数有默认的参数为dispatch
// 该dispatch 可以用来触发reducer
// 有时候在触发异步的时候， 需要传递参数，这个时候，可以在函数内部返回一个 actionCreator 函数
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) {   //有参数，返回一个函数，函数参数默认为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之中可以直接访问到
    props.reduceFn()
    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 () {       //通过正常方式修改状态
      dispatch({       
        type: 'REDUCE',
        payload: 5
      })
    },
    addFn () {
      dispatch({
        type: 'ADD',
        payload: 5
      })
    },
    getBannerList () {      //通过thunk方式修改状态
      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' //异步操作说明
 
import home from './modules/home'
import app from './modules/app'
 
const reducer = combineReducers({
  app,
  home
})
 
const sagaMiddleware = createSagaMiddleware()   //生成saga中间件
 
const store = createStore(reducer, applyMiddleware(sagaMiddleware))
//建立链接
//和thunk一样，把saga中间件挂载到状态管理器中就可以使用saga的方式修改状态了
 
sagaMiddleware.run(mySaga)
//run： 发送
// 这里是封装了一个mySage函数作为修改状态的函数
 
export default store

import { call, put, takeLatest } from 'redux-saga/effects'
 
import { getBannerList, getProList } from '../api/home'
 
//  redux-saga    --->    必须与generator函数一起使用
 
function * getBannerListAction() {
  const res = yield call(getBannerList) //call--调用函数
  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

// mysaga文件中我们定义了发送的方式
import { takeLatest } from 'redux-saga/effects'
// takeLatest ---分配任务；在下方。我们自己定义了key并为其分配了事件，这些事件就是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)
}
 
//  我们以后再想修改状态的时候就不需要使用store.dispatch()这样修改了
//  可以使用这个文件中定义的key值进行修改
 
//  我们在组件的connect中这样定义自定义函数，直接根据key值调用这里的修改方法
dispatch => {
    dispatch({ type: 'REQUEST_PRO_LIST'})
}
 
 
// put, call
//  call ---> 含义是调用
//  put ---> 含义是推，把当前的action推到下一个去执行（队列）。
 
yield put(action)
yield call(fn)