react中redux基本使用

1. 安装 

npm install @reduxjs/toolkit react-redux

2.创建store目录

 3. 创建counterStore.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

// 使用RTK创建store, createSlice 创建reducer的切片 import {createSlice } from "@reduxjs/toolkit"; const counterSlice = createSlice({ // 需要一个配置对象作为参数，通过对象的不同属性来指定它的配置   name:'counter', // 用来自动生成 action 中的 type   initialState:{ // state的初始值     count:0   },   // 指定state的各种操作，直接在对象中添加方法   reducers:{     inscrement: state => { // state是一个代理对象，可直接修改       state.count ++     },     decrement: state => {         state.count --     }   } }) // 切片对象会自动的帮助我们生成action export const { inscrement,decrement } = counterSlice.actions // 导出 reducer export default counterSlice.reducer

　　3. store/index.js

?

1 2 3 4 5 6 7 8 9 10

import { configureStore } from "@reduxjs/toolkit"; import counterReducer from './modules/counterStore'   // 创建store对象 const store = configureStore({     reducer:{       counter:counterReducer     }   })   export default store

　　4. 在src/index.js文件中如下

?

1 2 3 4 5 6 7 8 9 10 11

import { Provider } from 'react-redux'; import store from './store';   const root = ReactDOM.createRoot(document.getElementById('root')); root.render(   <React.StrictMode>      <Provider store={store}>       <App />     </Provider>   </React.StrictMode> );

　　5. 在组件中使用

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

import { useSelector,useDispatch } from "react-redux" import{inscrement,decrement} from './store/modules/counterStore'       // useSelector() 用来加载state中的数据   const {count} = useSelector(state => state.counter)   // 通过useDispatch() 来获取派发器对象   const dispatch = useDispatch()         <div>           store count: {count}           <button onClick={()=>dispatch(inscrement())}> ++</button>           <button onClick={()=>dispatch(decrement())}>--</button>         </div>