在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]), // 同意使用中间件
)