【React-redux使用】

什么是React-ReduxReact-Redux 是 React 的官方 Redux UI 绑定库,本质上就是在redux的基础上给ui组件库增加了一个容器负责与store进行数据交互页面组件不再直接与store联系想获取store的数据可以直接通过props从容器中获取流程图说明1.所有的UI组件都应该包裹一个容器组件他们是父子关系2.容器组件是真正和redux打交道的里面可以随意的使用redux的api3.UI组件中不能使用任何redux的api4.容器组件会传给UI组件1redux中所保存的状态2用于操作状态的方法5.备注容器给UI传递状态、操作状态的方法均通过props传递使用流程1.创建容器containers在脚手架环境内创建containers文件夹2.安装react-redux插件资源npm install react-redux -D3.在src目录下index.js文件中导入react-redux资源import {Provider} from react-redux4.在src目录下index.js文件中用provider标签将BrowserRouter/BrowserRouter标签包裹root.render( Provider store{store} BrowserRoute App/ /BrowserRoute /Provider )5.在 src/store/index.js 中创建基础的 Redux storeimport { createStore } from redux; // 1. 定义初始状态 const initialState { count: 0 }; // 2. 定义 reducer处理状态更新 const reducer (state initialState, action) { switch (action.type) { case INCREMENT: return { ...state, count: state.count 1 }; case DECREMENT: return { ...state, count: state.count - 1 }; default: return state; } }; // 3. 创建 Store const store createStore(reducer); export default store;6.在containers文件夹下创建文件,写入如下内容import { connect } from react-redux; // 导入UI组件纯展示无Redux API import CountUI from ../components/CountUI; // 核心1映射Redux的state到UI组件的props const mapStateToProps (state) { return { count: state.count // 把Store中的count传给UI组件的props.count }; }; // 核心2映射操作状态的方法dispatch action到UI组件的props const mapDispatchToProps (dispatch) { return { increment: () dispatch({ type: INCREMENT }), // 加1方法 decrement: () dispatch({ type: DECREMENT }) // 减1方法 }; }; // 核心3用connect连接UI组件和Redux生成容器组件 const CountContainer connect(mapStateToProps, mapDispatchToProps)(CountUI); export default CountContainer;7.在 src/components/CountUI.js 中编写纯展示组件import React from react; // UI组件只接收props渲染页面触发props中的方法 const CountUI (props) { return ( div h1当前计数{props.count}/h1 button onClick{props.increment}1/button button onClick{props.decrement}-1/button /div ); }; export default CountUI;8.在项目中使用容器组件import React from react; import CountContainer from ./containers/CountContainer; function App() { return ( div classNameApp {/* 直接用容器组件无需关心Redux逻辑 */} CountContainer / /div ); } export default App;关键补充说明1.connect函数的作用(1)第一个参数 mapStateTopProps把store中的状态映射为UI组件的 props(2)第二个参数 mapDispatchToProps把触发action的方法映射为UI组件的 props返回值一个新的容器组件包裹了 UI 组件。2.为什么用 Provider无需手动给每个容器组件传storeProvider会通过react上下文Context把store传给所有子组件的connect方法总结1React Redux核心是拆分 UI 组件和容器组件UI组件纯展示容器组件处理Redux交互2Provider 全局注入storeconnect函数连接UI组件和Redux通过props传递状态 / 方法3核心流程UI组件触发props方法,随后容器组件dispatch派发要执行的action触发store更新状态,更新后容器组件重新传递props最终UI组件重新渲染。