大家好，我是前端的西瓜哥。今天我们将了解将Redux 与React 结合使用的四种方法。
Redux 是一个状态容器JS 库，它提供可预测的状态管理，通常与React 一起使用来管理应用程序的全局状态并执行响应式组件更新。
通常不需要Redux，但仅当您的项目更复杂时，例如当您有多个使用分布在不同位置的相同状态的组件时。在这种情况下，为每一层传递props 将使代码难以维护。此时，您可能会考虑使用状态管理库，例如Redux。
创建一个显示用户名的User 组件，并支持在不使用Redux 的情况下设置用户名。首先我们看看不使用Redux 的情况下如何编写。
import{Component,createRef}from\'react\';classUserextendsComponent{state={username:\'前端西瓜哥\'};inputRef=createRef();setUsername=()={this.setState({username:this.inputRef.current.value) } ) ;};render(){return(用户名：{this.state.username}
设置用户名
);}}exportdefaultUser; 让我们转换此组件并将其状态移至Redux。
在最低级别，Redux 与框架无关。 首先，我们来看看如何仅使用Redux 库来编写它。
演示：https://codesandbox.io/s/redux-plain-demo-bc4kv0
首先，创建一个减速器。
//user_reducer.jsimport{SET_USERNAME}from\'./constants\';//初始值constdefaultState={name:\'前端西瓜兄弟\',age:88};//用于改变用户状态的Reducer constuserReducer=(preState=defaultState ,action )={switch(action.type){caseSET_USERNAME://type值都是常量return{.preState,name:action.payload};//这里如果你愿意也可以添加setUserAga之类的逻辑。 default:returnpreState;}}; //constants .jsexportconstSET_USERNAME=\'SET_USERNAME\'; reducer 是一个函数，它接受原始状态preState 和更新操作对象action，用于更新状态。
动作对象有
表示该操作类型的描述
和
其他数据属性（通常是有效负载）。有效负载以某种方式计算新状态并替换redux 中的原始状态。
{type:\'SET_USERNAME\',payload:\'new username\'}类型通常是字符串。例如，使用：
“COUNT_INCRMENT”
增加计数器或使用
“SET_USERNAME”
更新您的用户名。减速器根据不同的类型执行不同的状态更新行为。
通常，您使用函数来帮助您构建操作。这个函数称为动作创建器。
//user_action.jsimport{SET_USERNAME}from\'./constants\';exportconstsetUsernameAction=(data)={return{type:SET_USERNAME,payload:data};};Reducer可以用来构建store。 store 可以访问redux 中存储的所有状态。
import{combineReducers,createStore}from\'redux\';import{userReducer}from\'./user_reducer\';conststore=createStore(combineReducers({user:userReducer}));exportdefaultstore;combineReducers 可以是Reducers，可以组合起来。例如，在上面的代码中您可以传递：
store.getState().user
获取用户对象。
如果你想添加一个新的计数器状态对象，请像这样添加：
counter: counterReducer
, 可以使用
store.getState().counter
来获取这个对象。
createStore用于创建应用程序中的所有状态，这些状态保存在返回的store中。
用户组件如下所示：
导入{Component,createRef}from\'react\';importstorefrom\'./store/store\';导入{setUsernameAction}from\'./store/user_action\';classUserextendsComponent{inputRef=createRef();componentDidMount(){store.subscribe (()={this.setState({});});}setUsername=()={store.dispatch(setUsernameAction(this.inputRef.current.value));};render(){return(用户名： { store.getState().user.name}
设置用户名
);}}exportdefaultUser;store.getState()
您可以获得状态对象。这允许您检索下面必要的对象，例如用户对象。
store.dispatch(动作)
调度操作对象以触发状态更新。
商店.订阅(fn)
订阅状态变化并执行回调函数。在这里，一旦我们知道状态发生变化，我们就会重新渲染组件。
Redux本质上是一个发布/订阅模型
，状态是聚合的，状态可以继承
store.getState()
访问、路径
store.dispatch(动作)
改变状态，通过
商店.订阅(fn)
订阅状态更改（React 组件在监听更改后重新渲染组件）。
这种写法是最原始的写法，可以用在任何框架中。
缺点是显而易见的。使用redux 的组件必须订阅状态更改，并在更改后立即重新渲染组件。
在某些情况下，其他组件的状态可能会发生变化，导致当前组件不必要地重新渲染。
你自己判断吧。太复杂，容易出错，而且容易忘记订阅。关于忘记订阅的问题，
也可以直接监听根组件并重新渲染，但这样的性能很差。
西瓜兄弟接下来介绍的React-Redux库可以解决这个问题。仅当当前组件使用的某些状态发生更改时，您才可以重新渲染组件。
React-Redux 事实证明，每个人都喜欢将Redux 与React 结合使用，因此Facebook 发布了React-Redux 库，以帮助大家更好、更准确地使用Redux 与React。
首先我们看一下如何使用React-Redux连接更高层的组件
正在连接
怎么写。
演示：https://codesandbox.io/s/react-redux-with-connect-demo-kfvxt6
React-Redux 引入了专门负责处理Redux 的容器组件的概念。容器组件实际上是更高级别的组件，封装了实际的UI 组件并对其执行以下任务：
将状态映射并分派到props 并将其注入到UI 组件中。
监视状态更改并根据需要重新呈现UI 组件。
顶级组件：接受组件参数并返回新组件的函数。高层组件的功能是封装实际UI组件的可重用逻辑，通常是为了增强功能。
随着React Hooks 变得越来越流行，人们开始更喜欢用React Hooks 替换编写更优雅的高阶函数。
constContainerComponent=connect(mapStateToProps,mapDispatchToProps,)(UIComponent); 接下来，启动转换项目。
创建一个容器文件夹，将User.jsx文件放入其中，并写入以下内容。
//containers/User.jsximport{connect}from\'react-redux\';importUserUIfrom\'./components/User\';import{setUsernameAction}from\'./store/user_action\';exportdefaultconnect(//mapStateToProps(state)=({user:state.user}),//mapDispatchToProps(dispatch)=({setUsername:(newName)=dispatch(setUsernameAction(newName))}))(UserUI); 然后容器将对象传递到使用的store别忘了。如下：
importUserContainerfrom\'./containers/User\';importstorefrom\'./store/store\';import\'./styles.css\';exportdefaultfunctionApp(){return;} 当然，将每个容器组件传递到商店是一件痛苦的事情，因为它通常是使用单独的方法。使用redux-react 提供的上下文提供程序包装根组件，如下所示：
import{Provider}from\'react-redux\';ReactDOM.render(,document.getElementById(\'root\'));现在改造UI 组件：
导入{Component,createRef}from\'react\';classUserextendsComponent{inputRef=createRef();render(){return(username:{this.props.user.name})
this.props.setUsername(this.inputRef.current.value)}设置用户名
);}}exportdefaultUser; UI 组件的props 获取插入的用户对象、setUsername 方法和store 对象（如果使用Context 方法则不会）。
使用连接后，
仅当组件使用的状态发生变化时才会触发组件更新。
这里可能需要特别小心。
检查新状态对象是否不等于旧状态
这是为了触发组件的重新渲染，在处理对象方法时很容易出错。我需要将新对象复制为新状态。我们建议使用扩展运算符。
//user_reducer.js//写错了。新的state仍然指向原来的对象preState.name=action.payload;returnpreState;//正确的语法return{.preState,name:action.payload}; immer 是一个不可变的数据结构库。
React-Rudex 与React Hooks 配合使用，并使用顶部组件连接来为UI 组件提供动力。
说到增强功能，react-redux还提供了目前非常流行的React Hooks编写方式。这个比较优雅，也是西瓜兄弟和我公司目前的做法。
这里不需要上游组件。这意味着您甚至不需要容器组件。
演示：https://codesandbox.io/s/react-redux-with-hooks-demo-8ixl0h
//User.jsimport{useEffect,useRef}from\'react\';import{useDispatch,useSelector}from\'react-redux\';import{setUsernameAction}from\'./store/user_action\';constUser=()={//获取状态constuser=useSelector((state)=state.user);//获取调度方法constdipatch=useDispatch();constinputRef=useRef(null);return(user name :{user.name}
{constnewName=inputRef.current.value;dipatch(setUsernameAction(newName));}}用户名设置
);};exportdefaultUser;通过useSelector 可以获取上下文绑定的状态，并从中获取所需的状态。
constuser=useSelector((state)=state.user); 如果不止一个，可以写成对象的形式。
const{user,counter}=useSelector((state)=({user:state.user,counter:state.counter})); 这与connect 的mapStateToProps 类似吗？
接下来，获取调度方法。
constdipatch=useDispatch();hook 非常优雅，但我发现与connect write 方法相比，它结合了redux 状态逻辑和组件。然而，这通常是可以接受的，因为该组件是业务组件。
查看Redux Toolkit，您可以看到我们需要维护状态，编写Reducer和Action Creator方法，并使用一个contents.js文件来集中管理所有actionType字符串。
我看你写了很多
模板代码
，每次添加状态时我都必须创建上述内容，并且遍历各种文件让我感觉很糟糕。
于是redux创建了另一个工具集库Redux Toolkit来解决这个问题。
演示：https://codesandbox.io/s/redux-toolkit-demo-8x0391
Redux Toolkit 提供了createSlice 方法来帮助您：
使用更少的代码生成匹配的减速器和操作，以实现更好的可维护性。
//userSlice.jsimport{createSlice}from\'@reduxjs/toolkit\';constuserSlice=createSlice({name:\'user\',initialState:{name:\'前端西瓜兄弟\',age:88},reducers:{setUsername:(state,action)={ //ReduxToolkit使用内置的immer，所以可以直接更改state.name=action.payload;}}});//actionsexportconst{setUsername}=userSlice.actions;//获取你想要的state，设置为Use组件中的userSelectorhook。 exportconstselectUser=(state)=state.user;//reducerexportdefaultuserSlice.reducer;createSlice传递参数name（用于生成action的标识符）、initialState（初始值）、Reducers（转换为对象格式），返回一个对象。
例如上面的代码中，执行后返回的setUsername方法就在action的下面。
{type: \'用户/setUsername\'，payload: \'新名称\'}
。
可以看到，action type是根据name和reducer属性生成的，以保证唯一性。
Slice 还有一个化简器对象，它实际上将先前传递的化简器和自动生成的操作转换为函数的形式。
createSlice 的作用是什么？
createSlice 将最初管理状态但具有单独代码的操作和化简器聚集在一起，从而无需您自己命名操作类型。
接下来，您还需要将生成的存储更改为configureStore。
//store.jsimport{configureStore}from\'@reduxjs/toolkit\';importuserReducerfrom\'./userSlice\';conststore=configureStore({reducer:{user:userReducer}});exportdefaultstore;Summary 简短概述：
原著的文笔太粗糙了，还得自己去体会。
商店.订阅(fn)
确定一个组件是否需要重新渲染创建起来很麻烦，而且性能也是一个问题。
由于Redux React库通过connect注入redux状态，因此我们需要编写connect上层组件生成的额外容器组件，但耦合度降低了。 Redux React 仅在所需状态发生变化时重新渲染组件。这里需要注意的是，在进行更改时，尤其是对于对象来说，旧状态和新状态不能相同。否则重新渲染将不起作用。
对于主要使用功能组件的项目，可以直接使用useSelector获取状态，使用userDispatch改变状态，无需连接。非常优雅。
Redux发布了Redux Toolkit，解决了配置复杂、需要创建过多模板、需要手动安装大量相关包的问题。
我是前端西瓜哥，喜欢分享前端技术。欢迎关注我，学习更多前端知识。