济南做网站,网站模板下载好之后如何安装,广西网站,wordpress相册样式1.Redux核心概念
纯函数
确定的输入#xff0c;一定会产生确定的输出#xff1b;函数在执行过程中#xff0c;不能产生副作用
store
存储数据
action
更改数据
reducer
连接store和action的纯函数 将传入的state和action结合#xff0c;生成一个新的state
dispatc…1.Redux核心概念
纯函数
确定的输入一定会产生确定的输出函数在执行过程中不能产生副作用
store
存储数据
action
更改数据
reducer
连接store和action的纯函数 将传入的state和action结合生成一个新的state
dispatch派发action修改storesubscribe | unsubscribe订阅store的数据发生变化
// store/index.js
import { createStore } from redux;const initState {msg: hello redux
}
/*** 定义reducer纯函数*****/
function reducer(state initState, action){if (action.type change){return {...state, msg: action.payload.msg};}return state;
}export default const store createStore(reducer);// store/ actionCreator.js
/**** 动态生成action *****/
export const CHANGEMSGACTION msg ({type: change, payload: {msg}});// 使用的地方
import store from ~/store;
const unsubscribe store.subscribe(() {console.log(::::STORE, store.getState());
})
unsubscribe();// 修改store中的数据
const MSGAction {type: change, payload: {msg: hello change,}
};
store.dispatch(MSGAction);combineReducer将多个reducer合并为一个reducer达到拆分store的目的
2. Redux三大原则
单一数据源
整个应用程序的state被存储在一颗object tree中并且这个object tree只存储在一个 store中R-edux并没有强制让我们不能创建多个Store但是那样做并不利于数据的维护单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改
State是只读的
唯一修改State的方法一定是触发action不要试图在其他地方通过任何的方式来修改State这样就确保了View或网络请求都不能直接修改state它们只能通过action来描述自己想要如何修改state这样可以保证所有的修改都被集中化处理并且按照严格的顺序来执行所以不需要担心race condition竟态的问题
使用纯函数来执行修改
通过reducer将 旧state和 actions联系在一起并且返回一个新的State随着应用程序的复杂度增加我们可以将reducer拆分成多个小的reducers分别操作不同state tree的一部分但是所有的reducer都应该是纯函数不能产生任何的副作用
3.react-redux的使用
通过provider给整个app提供store
// App.jsx
import { Provider } from react-redux;
import store from ~/store;const root document.querySelector(#root);
root.render(Provider store{store}App//Provider
)通过connect将组件和store连接。connect会返回一个高阶组件,接受的参数将store中的部分数据映射到组件
// 组件中
import React, { PureComponent } from react;
import { connect } from react-redux;class MyComp extends PureComponent{render(){const { msg, changeMsg } this.props;return (divh2{msg}/h2input onChange{val changeMsg(val)} //div}
}
/**** 将state映射到props,组件中props中就会有msg ****/
function mapStateToProps(state){return {msg: state.msg}
}
/*** 将修改store的函数添加到组件的props中 ***/
function mspDispatchToProps(dispatch){return {changeMsg(msg){dispatch(CHANGEMSGACTION(msg));}}
}export default connect(mapStateToProps, mapDispatchToProps)(MyComp);
异步action—中间件 Middleware可以帮助我们在请求和响应之间嵌入一些操作的代码比如cookie解析、日志记录、文件压缩等操作createStore的第二个参数接受一个中间件,使用react-thunk使得dispatch可以派发函数在派发的函数中可以异步更新store。
import { createStore, applyMiddleware } from redux;
import thunk from redux-thunk;const reducer (state, action) {...return state;
}const store createStore(reducer, applyMiddleware(thunk));// actionCreator.js
...
/**** 被派发的函数需要返回一个函数该函数接受两个参数dispatchgetState*****/
const fetchHomeDataAction () {return (dispatch, getState) {fetch(url).then(res {dispatch(HOMEDATAACTION(res.data));});}
}
// 组件中
function mapDispatchToProps(dispatch){return {fetchHomeData(){dispatch(fetchHomeDataAction()); // 执行action函数}}
}使用redux-thunk 在创建store时传入应用了middleware的enhance函数 通过applyMiddleware来结合多个Middleware, 返回一个enhancer将enhancer作为第二个参数传入到createStore中定义返回一个函数的action 这里不是返回一个对象了而是一个函数该函数在dispatch之后会被执行
4.Redux/toolkit
npm install reduxjs/toolkit react-redux
createSlice({name, initialState, reducers:{}})接受reducer函数的对象、切片名称和初始状态值并自动生成切片reducer并带有相应的actions。 name用户标记slice的名词, 在之后的redux-devtool中会显示对应的名词initialState初始化值. 第一次初始化时的值reducers相当于之前的reducer函数.对象类型并且可以添加很多的函数函数类似于redux原来reducer中的一个case语句 参数一state参数二调用这个action时传递的action参数
import { createSlice } from reduxjs/toolkit;
const CounterSlice createSlice({name: counter,initialState: {count: 0,},reducers: {addNumber(state, action){state.counter action.payload;}}
});export const { addNumber } CounterSlice.action;
export default CounterSlice.reducer;configureStore包装createStore以提供简化的配置选项和良好的默认值。它可以自动组合你的 slice reducer添加你提供的任何 Redux 中间件redux-thunk默认包含并启用 Redux DevTools Extension。
const store configureStore({reducer: {counter: counterReducer;}
})createAsyncThunk接受一个动作类型字符串和一个返回承诺的函数并生成一个pending/fulfilled/rejected基于该承诺分派动作类型的 thunk
const AXIOSDataSlice createSlice({name: axiosdata,initialState: {data: []},reducers: {setData(state, action){state.data action.payload;}},extraReducers: {/**[AxiosMultidataAction.pending](state, action){state.data action.payload;}[AxiosMultidataAction.rejected](state, action){state.data action.payload;}**/[AxiosMultidataAction.fulfilled](state, action){state.data action.payload;}}/*** 链式写法 *****/extraReducers: (builder) {builder.addCase(AxiosMultidataAction.pending, (state, action) {console.log(pending); }).addCase(AxiosMultidataAction.fulfilled, (state, action) {})}
})
export default AXIOSDataSlice.reducer;const AxiosMultidataAction createAsyncThunk(axiosdata, async (extraInfo, store) {
// 第一个canconst res await getData();return res;
})immerjs库保持数据不可变持久化数据
5 手写connect
function connect(mapStateToProps, mapDispatchToProps){function hoc(Component){class HOCComponent extends PureComponent{constuctor(props){super(props);this.state mapStateToProps(store.getState());}componentDidMount(){this.unsubscribe store.subscribe(() {//this.forceUpdate();this.setState(mapStateToProps(store.getState());})}componentWillUnmount() {this.unsubscribe();}render(){return Component {...this.props} {...mapStateToProps(store.getState())} {...mapDispatchToProps(store.dispatch)} /}}return HOCComponent;}return hoc;
}
