React学习---Redux、zustand

1.Redux的作用Redux 是一个使用叫做 “action” 的事件来管理和更新应用状态的模式和工具库它以集中式 Storecentralized store的方式对整个应用中使用的状态进行集中管理其规则确保状态只能以可预测的方式更新。2.Redux 库和工具Redux 是一个小型的独立 JS 库。 但是它通常与其他几个包一起使用React-Redux​Redux 可以集成到任何的 UI 框架中其中最常见的是 React 。React-Redux 是我们的官方包它可以让 React 组件访问 state 片段和 dispatch actions 更新 store从而同 Redux 集成起来。Redux Toolkit​Redux Toolkit 是我们推荐的编写 Redux 逻辑的方法。 它包含我们认为对于构建 Redux 应用程序必不可少的包和函数。 Redux Toolkit 构建是我们建议的最佳实践中简化了大多数 Redux 任务预防了常见错误并使编写 Redux 应用程序变得更加容易。Redux DevTools 扩展​Redux DevTools 扩展 可以显示 Redux 存储中状态随时间变化的历史记录。这允许你有效地调试应用程序包括使用强大的技术如“时间旅行调试”。//安装 Redux Toolkit 和 React-Redux npm install reduxjs/toolkit react-redux3.Redux的目录结构4.Redux的使用1.引入react首先建立如3的目录结构,现在是counterStore.js的代码示例store/modules/counterStore.js/*************** store/modules/counterStore.js ******************/ import { createSlice } from reduxjs/toolkit; const counterState createSlice({ name: counter, // 初始化state initialState: { count: 0, }, // 修改状态的方法 同步方法 支持直接修改 reducers: { inscrement(state) { state.count; }, }, }); // 结构出来actionCreater函数 const { inscrement} counterState.actions; // 以按需导出的方式导出actionCreater export { inscrement}; // 获取reducer const reducer counterState.reducer; // 以默认导出的方式导出reducer export default reducer;store/index.js/************* store/index.js*****************/ import { configureStore } from reduxjs/toolkit; import counterState from ./modules/counterStore; const store configureStore({ reducer: { counter: counterState, }, }); export default store;main.jsx/********main.jsx*********/ // 项目的入口,从这开始运行 // React必须的俩个核心包 import { StrictMode } from react; import { createRoot } from react-dom/client; // import ./index.css // 导入项目的根组件 import App from ./App.jsx; // 使react与redux连接 import store from ./store; import { Provider } from react-redux; // 把App根组件渲染到id未root的dom节点上 createRoot(document.getElementById(root)).render( StrictMode Provider store{store} App / /Provider /StrictMode );2.组件内部使用redux的状态获取initialState的数据主要用到的react-redux的hook函数----useSelector获取store中的数据/*************** store/modules/counterStore.js ******************/ import { createSlice } from reduxjs/toolkit; const counterState createSlice({ name: counter, // 初始化state initialState: { count: 0, }, }); // 获取reducer const reducer counterState.reducer; // 以默认导出的方式导出reducer export default reducer; /***************//StoreStudy.jsx************************/ import { useDispatch, useSelector } from react-redux; function StoreStudy() { // 获取redux的state const { count } useSelector((state) state.counter); return ( div h3redux的学习/h3 {count} /div ); } export default StoreStudy;获取reducerss的方法(同步方法)组件中使用hook函数-----useDispatch获取dispatch方法执行store模块中导出的actionCreater方法---得到要提交action对象/*************** store/modules/counterStore.js ******************/ import { createSlice } from reduxjs/toolkit; const counterState createSlice({ name: counter, // 初始化state initialState: { count: 0, }, // 修改状态的方法 同步方法 支持直接修改 reducers: { inscrement(state) { state.count; }, decrement(state) { state.count--; }, addToNum(state, action) { state.count action.payload; }, }, }); // 结构出来actionCreater函数 const { inscrement, decrement ,addToNum} counterState.actions; // 以按需导出的方式导出actionCreater export { inscrement, decrement ,addToNum}; // 获取reducer const reducer counterState.reducer; // 以默认导出的方式导出reducer export default reducer;/***************** StoreStudy.jsx ********************/ import { useDispatch, useSelector } from react-redux; // 导入actionCreater import { inscrement, decrement, addToNum } from /store/modules/counterStore; function StoreStudy() { // 获取redux的state const { count } useSelector((state) state.counter); // 获取dispatch方法,为了使用reducer的方法修改状态 const dispatch useDispatch(); return ( div h3redux的学习/h3 {/* 提交 action对象*/} button onClick{() dispatch(decrement())}-/button {count} button onClick{() dispatch(inscrement())}/button {/* 传参修改state */} button onClick{() dispatch(addToNum(10))}加到10/button button onClick{() dispatch(addToNum(20))}加到20/button /div ); } export default StoreStudy;redux异步方法/*** 异步操作样板代码********* * */1.创建store的写法保持不变配置好同步修改状态的方法2.单独封装一个函数在函数内部return一个新函数在新函数中2.1封装异步请求获取数据2.2 调用同步actionCreater传入异步数据生成一个action对象并使用dispatch提交3.组件中dispatch的写法保持不变/***************** store/modules/channelStore.js ********************/ import { createSlice } from reduxjs/toolkit; import axios from axios; const channelStore createSlice({ name: channel, initialState: { channelList: [], }, reducers: { setChannels(state, action) { state.channelList action.payload; }, }, }); //解构action对象 const { setChannels } channelStore.actions; //定义异步函数 const fetchChannelList () { //这边的dispatch形参事内置形参 return async (dispatch) { const res await axios.get(http://geek.itheima.net/v1_0/channels); dispatch(setChannels(res.data.data.channels)); }; }; //导出异步状态 export { fetchChannelList }; const reducer channelStore.reducer; export default reducer;/******************* StoreStyle.jsx ************/ import { useDispatch, useSelector } from react-redux; // 导入 channelStore import { fetchChannelList } from /store/modules/channelStore; import { useEffect } from react; function StoreStudy() { // 获取dispatch方法,为了使用reducer的方法修改状态 const dispatch useDispatch(); // 获取channel的list const { channelList } useSelector((state) state.channel); useEffect(() { dispatch(fetchChannelList()); }, [dispatch]); return ( div h3redux的学习/h3 div {channelList.map((item) ( li key{item.id}{item.name}/li ))} /div /div ); } export default StoreStudy;5.zustand官网1.安装# NPMnpm install zustand2.用法//bearsStore.js import { create } from zustand const useBearsStore create((set) ({ bears: 0, increasePopulation: () set((state) ({ bears: state.bears 1 })), removeAllBears: () set({ bears: 0 }), updateBears: (newBears) set({ bears: newBears }), })) export default useBearsStore //组件使用 //结构多个且避免不必要的重渲染需要结合shallow import { shallow } from zustand/shallow const { bears, increasePopulation } useBearsStore( (state) ({ bears: state.bears, increasePopulation: state.increasePopulation, }), shallow ) function BearCounter() { //const { bears } useBearsStore() //不建议因为会影响不必要的重绘 const bears useBearsStore((state) state.bears) return h1{bears} bears around here.../h1 } function Controls() { const increasePopulation useBearsStore((state) state.increasePopulation) return button onClick{increasePopulation}one up/button }