windows搭建php网站,盱眙在仕德伟做网站的有几家,公司部门组织架构,欧米茄表官方官网redux团队先后推出了redux、react-redux、reduxjs/toolkit#xff0c;这三个库的api各有不同。本篇文章就来梳理一下当我们需要在项目中集成redux#xff0c;从直接使用redux#xff0c;到使用react-redux#xff0c;再到react-redux和reduxjs/toolkit配合使用#xff0c;…redux团队先后推出了redux、react-redux、reduxjs/toolkit这三个库的api各有不同。本篇文章就来梳理一下当我们需要在项目中集成redux从直接使用redux到使用react-redux再到react-redux和reduxjs/toolkit配合使用分别需要调用到哪些api。 一、在react中集成redux redux中通过createStore可以创建出store实例在该实例上存在三个实例方法。
通过store.subscribe可以监听到state的改变引起组件的重新渲染。
通过dispatch可以分发action引起redux内部state的更新。
通过getState可以获取到redux内部的state。 以一个简单的计数器程序作为示例。 首先在App组件中引入Count组件为其传入store实例作为props。
import React from react;
import Count from ./components/Count;
import store from ./store;export default function App() {return Count store{store} /;
}在Count组件中我们在组件挂载后通过store.subscribe监听redux的state通过store,getState获取state为按钮绑定点击事件回调调用dispatch传入action的返回值作为参数。
import React, { useEffect, useState } from react;
import store from ../store;
import { createAddActions } from ../store/actions/count;export default function Count() {const [_, rerender] useState({});useEffect(() {store.subscribe(() rerender({}));}, []);return (divdivsum: {store.getState()}/divbutton onClick{() store.dispatch(createAddActions(1))}点我1/button/div);
}接下来是store的编写。
// store/index.jsimport { countReducer } from ./reducers/count;
import { createStore } from redux;export default createStore(countReducer);
reducers必须是一个纯函数纯函数的概念是需要返回一个新的state替换原来的state而不是直接在原来的state上修改。
// store/reducers/count.jsexport function countReducer(prevState, action) {switch (action.type) {case add:return prevState action.value;default:return 0;};
};
action的实现。
// store/actions/count.jsexport function createAddActions(value) {return {type: add,value,};
}; 二、在react中集成react-redux
react-redux提出了容器组件的概念要求redux只能和容器组件进行通信至于ui组件只能通过props来获取容器组件传入的state和引起redux内部state改变的callback。 引入容器组件的目的在于尽量让ui组件内部看起来与其他不需要使用redux的组件无异。
如何理解无异呢就是不要直接去调用store的实例方法而是调用父组件提供的方法。当我们调用父组件提供的方法而react-redux会再调用store的实例方法。
store.getState() - props.state
store.dispatch() - props.callback()
store.subscribe不再手动调用而是由react-redux执行。 Count.js修改如下。
import React, { useEffect, useState } from react;
import { connect } from react-redux;
import { createAddActions } from ../store/actions/count;function Count(props) {return (divdivsum: {props.state}/divbutton onClick{() props.add(1)}点我1/button/div);
}export default connect((state) ({ state }),(dispatch) ({add: (number) dispatch(createAddActions(number)),})
)(Count);
connect的第二个参数还可以简写为对象形式。
export default connect((state) ({ state }), { add: createAddActions })(Count);我们使用redux的目的是在多个组件之间共享state所以我们直接引用redux时需要在多个组件中传入store作为propsreact-redux针对此也做了优化。
我们只需引入Provider包裹App组件在Provider中传入store作为props我们就可以在容器组件中获取到props。其实底层就是调用了react的SomeContext.Provider内部组件只要使用useContext就可以获取到store。
// index.jsimport React from react;
import ReactDOM from react-dom/client;
import { Provider } from react-redux;
import store from ./store;
import App from ./App;const root ReactDOM.createRoot(document.getElementById(root));
root.render(Provider store{store}App //Provider
);
在Count组件中我们不再需要手动传入store。
import React from react;
import Count from ./components/Count;export default function App() {return Count /;
}
在现在的react-redux中更推荐使用useSelector和useDispatch来代替connect。当我们使用useSelector和useDispatch获取state和分发action时不再存在container组件取而代之的是selector hook和dispatch hook。
对于connect而言会优先从props中获取store不存在的情况下再用React.useContext获取props所以store有两种传入方式。
对于useSelector和useDispatch而言他们只是Hook而不是组件没有props只能从React.useContext中获取store所以如果外层没有Provider组件的话项目是无法运行的。
此外connect和Provider都实现了对store的监听。 import React, { useEffect, useState } from react;
import { useSelector, useDispatch } from react-redux;
import { createAddActions } from ../store/actions/count;export default function Count() {const state useSelector((state) state);const dispatch useDispatch();return (divdivsum: {state}/divbutton onClick{() dispatch(createAddActions(1))}点我1/button/div);
}三、在React中集成reduxjs/toolkit和react-redux
reduxjs/toolkit的作用如下
1. 将initialState、reducers、actions整合在一起形成切片
2. 自动生成action{name: sliceName/reducerName, payload: value}
3. 代替redux/thunk实现异步action功能
// store/slices/count.jsimport { createSlice } from reduxjs/toolkit;const counterSlice createSlice({name: counter,initialState: 0,reducers: {add: (state, action) {return state action.payload;},},
});export const { add } counterSlice.actions;export default counterSlice.reducer;
// store/index.jsimport countReducer from ./slices/count;
import { configureStore } from reduxjs/toolkit;export default configureStore({reducer: countReducer // reducer的结构对应state的结构
});
