react-redux 自练_redux练习-优快云博客

本文链接：https://blog.youkuaiyun.com/neverlandkk/article/details/122974562

这篇博客介绍了如何在React应用中使用Redux Toolkit的createSlice方法来创建和管理状态。通过`counterReducer`和`colorReducer`的例子，展示了如何定义初始状态、reducer函数，并在组件中使用`useDispatch`和`useSelector`钩子来改变和获取store中的数据。此外，还演示了如何在`configureStore`中注册reducer以及通过`Provider`将store注入到React组件树中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react-redux

目前使用的是redux的集成工具 @reduxjs/toolkit

使用

引入createSlice 类创建实例传入三个参数（对象） name initialValue reducers（这里注意暴露出去的是reducer 写得时候是reduce 擦）
暴露 reducers 里面的方法在页面中通过useDispatch 调用可传入payload 参数
默认暴露 xxxSlice.reducer 注册进 store文件中的configureStore

页面通过useSelectore 使用store（redux）中的值

代码

       //  app/store.js
       import { configureStore } from '@reduxjs/toolkit'
       import counterReducer  from '../features/counter/counterSlice'
       import colorReducer from '../features/color/colorSlice'
       export default configureStore({
       reducer: {
           counter: counterReducer,
           color:colorReducer
       },
       })


       // app/feature/counter/counterSlikce.js
       import { createSlice } from '@reduxjs/toolkit' ; 
       const colorSlice = createSlice({
           name:"colorSlice",
           initialState:{
               color:'red'
           },
           reducers:{
               changeClor: (state,action) =>{
                   state.color = action.payload.color
               }
           }
       })

       export const { changeClor } = colorSlice.actions
       export default colorSlice.reducer

       // app/feature/counter/counter.js
       import React from 'react'
       import { useSelector, useDispatch } from 'react-redux'
       import { decrement, increment } from './counterSlice'
       // import styles from './Counter.module.css'

       export function Counter() {
       //直接取到状态
       const count = useSelector((state) => state.counter.value)
       //修改状态
       const dispatch = useDispatch()

       return (
           <div>
           <div>
               <button
               aria-label="Increment value"
               onClick={() => dispatch(increment())}
               >
               Increment
               </button>
               <span>{count}</span>
               <button
               aria-label="Decrement value"
               onClick={() => dispatch(decrement())}
               >
               Decrement
               </button>
           </div>
           </div>
       )
       }


       //app.js
       import './App.css';
       import { Counter } from './features/counter/counter'
       import  Color  from './features/color/color'

       function App() {
       return (
           <div className="App">
           <Counter/>
           <Color/>
           </div>
       );
       }

       export default App;

       //index.js
       import React from 'react'
       import ReactDOM from 'react-dom'
       import './index.css'
       import App from './App'
       import store from './app/store'
       import { Provider } from 'react-redux'

       ReactDOM.render(
       <Provider store={store}>
           <App />
       </Provider>,
       document.getElementById('root')
       )

不可食用的视频：url