第一步安装 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]), // 同意使用中间件
)