redux是一个数据仓库解决方案,通过 createStore
创建store
,通过store.dispatch(action)
来更新数据。在react中使用可以通过这些包redux
,react-redux
,redux-thunk
,redux-logger
Provider
组件和 connect
方法包裹组件,将映射 store的state和使用dispatch
的方法映射到react组件的props
redux
的store.dispatch(action)
可以接收函数(dispatch)=>{}
,可以进行异步操作state
改变前后的值import { applyMiddleware, compose, legacy_createStore } from "redux";
import thunk from 'redux-thunk'
import logger from 'redux-logger'
import reducers from "./reducers";
// 第一个参数 reducers: 通过 combineReducers 组合的reducers,
// 第二个参数为 初始值,
// 第三个参数为 使用中间件,redux-thunk 中间件使 store.dispatch(action) 的action不止只能为对象,也可以为函数
// 此时store与react没有联系,可以直接使用 store.getState(),store.dispatch(action),store.subscribe(listener)
// 通过 react-redux 提供的 Provider组件和 connect 方法可以把 将 store 的 state和 dispatch 映射为react组件的 props
const store = legacy_createStore(reducers,{},compose(applyMiddleware(thunk,logger)))
export default store
import { combineReducers } from "redux";
import a from "./a";
import b from "./b";
// 组合多个 reducer,相当于 vue中的不同module的store
export default combineReducers({
a,
b
})
export const ACTION_TYPES = {
A:{
ADD:'A_ADD',
SUB:'A_SUB'
},
B:{
ADD:'B_ADD',
SUB:'B_SUB'
}
}
import { ACTION_TYPES } from "../actionTypes"
// action creator 这些函数返回 action对象,或者 入参为增强的 dispatch 的函数(函数里可以有异步操作)
const addBValue = (value)=>{
return {
type:ACTION_TYPES.B.ADD,
data:{value}
}
}
// 异步逻辑可以在这里实现
const addBValueAync = (value)=>{
return async(dispatch)=>{
await new Promise((resolve, reject) => {
setTimeout(() => {
resolve('')
}, 2000);
})
dispatch(addBValue(value))
}
}
export {addBValueAync,addBValue}
import React from "react";
import Counter from "./Count";
import "./App.css";
import store from "./store";
import { addAValueAync } from "./store/actions/a";
import { connect } from "react-redux";
function App({a,b,addAValueAsync}) {
return (
<div className="App">
<h1>react</h1>
<button onClick={()=>{
// 这里直接使用 store.dispatch()
store.dispatch(addAValueAync(2))
}}>click</button>
<button onClick={()=>{
addAValueAsync(3)
}}>click</button>
<h1>a::{a}</h1>
<h1>b::{b}</h1>
</div>
);
}
const mapStateToProps = (state)=>{
return {
a:state.a.a,
b:state.b.b
}
}
const mapDispatchToProps = (dispatch)=>{
return {
addAValueAsync(value){
dispatch(addAValueAync(value))
}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(App) ;
react-redux
的 Provider
组件包裹根组件import { Provider } from "react-redux";
import store from "./store";
root.render(
//
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
connnect()(组件)
要映射 state
和dispatch
方法到 props
的组件function App({a,b,addAValueAsync}) {
return (
<div className="App">
<h1>react</h1>
<button onClick={()=>{
store.dispatch(addAValueAync(2))
}}>click</button>
<button onClick={()=>{
//
addAValueAsync(3)
}}>click</button>
<h1>a::{a}</h1>
<h1>b::{b}</h1>
</div>
);
}
const mapStateToProps = (state)=>{
return {
a:state.a.a,
b:state.b.b
}
}
const mapDispatchToProps = (dispatch)=>{
return {
addAValueAsync(value){
dispatch(addAValueAync(value))
}
}
}
// 连接 react 组件和 redux
export default connect(mapStateToProps,mapDispatchToProps)(App) ;