React状态管理之redux

  • Z时代
  • 2024-01-10
  • 分类：综合

react

其实和vue对应的vuex都是差不多的东西，这里稍微提一下（安装Redux略过）：

import { createStore, combineReducers, applyMiddleware } from 'redux'
function user(state = {name: 'redux'}, action) {
  switch (action.type) {
    case 'CHANGE_USER_NAME':
      return {
        ...state,
        name: action.name
      }
  }
  return state
}
function project(state = {name: 'min-react'}, action) {
  switch (action.type) {
    case 'CHANGE_NAME':
      return {
        ...state,
        name: action.name
      }
  }
  return state
}
var rootReducer = combineReducers({
  user,
  project
})
var store = createStore(rootReducer)
export default store;

上述是一个标准的store，并且有两个reducer。然后我们希望store在每个组件里都能访问，这个时候你可以：

①将store挂在到入口文件的路由上，但是这样的话要通过props来访问，组件层级高的话，很麻烦；

②官网提供了一个组件Provider，他用起来像这样：

③挂载到中间件上

这样，对于store的所有操作，我们都可以写在store类上，并且可以供组件类随意调用，并且数据共享。相对于官方提供的Provider组件来说，可扩展性大大提高。

以上是 React状态管理之redux 的全部内容， 来源链接： utcz.com/z/382073.html

回到顶部