在react里面使用redux

第一步安装 npm i react-redux

第二步 redux数据注入到react应用内

import { Provider } from "react-redux"

Provider组件可以把redux数据注入到react应用里面 这种方法会被｛connect｝取代，下文会讲到，如下图。

第三步利用connect 把组件和state的数据进行关联 映射为组件的属性（取代Povider）

通过connect之后组件的props中会包含有state中的状态数据和一个dispatch方法

import { connect } from "react-redux"; const mapStateToProps = (state) => state; export default connect(mapStateToProps)(App);

通过combineReducers合并多个reducer为一个

import { createStore, combineReducers, compose, applyMiddleware } from "redux"; import thunk from "redux-thunk"; import counter from "./reducers/counter"; import product from "./reducers/product"; //创建一个reducer仓库 const store = createStore( combineReducers({ counter, product, }), compose( applyMiddleware(...[thunk]), // 同意使用中间件 window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ) ); export default store;

第四步redux的异步操作 redux里面的action是同步操作，只能做简单操作 vuex的话dispatch派发action为是用来做异步操作的，为mutations改变数据做准备 安装插件 npm i redux-thunk 然后引入import thunk from "redux-thunk";

compose( applyMiddleware(...[thunk]), // 同意使用中间件 )