全栈的自我修养 ———— redux入门(看这么一篇就够了!!!)

redux时react中负责状态管理的工具

一、下载

复制代码
npm I @reduxjs/toolkit react-redux

二、配置

1、目录

复制代码
modules里面可以定义多个store,index内负责收集这些store

2、store配置

这里定义了一个count参数和关于count的方法,一会用来测试

js 复制代码
import { createSlice } from '@reduxjs/toolkit'
const counterStore = createSlice({
    name: 'counter',
    initialState: {
        count: 0,
    },
    reducers: {
        setChannels (state,action){
            state.channelList = action.payload
        },
        increment(state) {
            state.count++
        },
        decrement(state) {
            state.count--
        },
        addToNum(state,action){
            console.log(state,action);
            state.count = action.payload
        }
    }
})
const { increment, decrement,addToNum } = counterStore.actions
const counterReducer = counterStore.reducer
export { increment, decrement,addToNum }
export default counterReducer

3、redux中index.js配置

js 复制代码
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./modules/counterStore";
const store = configureStore({
    reducer: {
        counter: counterReducer,
    }
})
export default store

4、启动类中index.js配置

js 复制代码
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import store from './store';
import { Provider } from 'react-redux';
import './global.css'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

三、使用

1、调用store的数据

js 复制代码
import { useSelector } from 'react-redux'
function App() {
  const { count } = useSelector(state => state.counter)
  return (
    <div>
      <div className='App'>
        {count}
      </div>
    </div>
  )
}
export default App;

2、调用store里面的方法

js 复制代码
import { useDispatch, useSelector } from 'react-redux'
import { increment, decrement } from './store/modules/counterStore'
function App() {
  const { count } = useSelector(state => state.counter)
  const dispatch = useDispatch()
  return (
    <div>
      <div className='App'>
        <button onClick={() => dispatch(decrement())}>-</button>
        <button onClick={() => dispatch(increment())}>+</button>
        {count}
      </div>
    </div>
  )
}
export default App;

3、改变store里面的值

js 复制代码
import { useDispatch, useSelector } from 'react-redux'
import { increment, decrement, addToNum } from './store/modules/counterStore'
function App() {
  const { count } = useSelector(state => state.counter)
  const dispatch = useDispatch()
  return (
    <div>
      <div className='App'>
        <button onClick={() => dispatch(decrement())}>-</button>
        <button onClick={() => dispatch(increment())}>+</button>
        {count}
        <button onClick={() => dispatch(addToNum(20))}>add To 20</button>
      </div>
    </div>
  )
}
export default App;
相关推荐
BillKu2 分钟前
Vue3数组去重方法总结
前端·javascript·vue.js
GDAL5 分钟前
Object.freeze() 深度解析:不可变性的实现与实战指南
javascript·freeze
LZQqqqqo6 分钟前
C# 接口(interface 定义接口的关键字)
java·开发语言·c#
寒水馨13 分钟前
Java 9 新特性解析
java·开发语言·新特性·java9·jdk9
江城开朗的豌豆23 分钟前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
摸鱼仙人~32 分钟前
Vue.js 指令系统完全指南:深入理解 v- 指令
前端·javascript·vue.js
拓端研究室35 分钟前
专题:2025医药生物行业趋势与投融资研究报告|附90+份报告PDF、原数据表汇总下载
android·开发语言·kotlin
啃火龙果的兔子35 分钟前
React 图标库发布到 npm 仓库
前端·react.js·npm
江城开朗的豌豆36 分钟前
Vue列表渲染的坑:为什么不能用index当key?血泪教训总结!
前端·javascript·vue.js
JiaLin_Denny37 分钟前
如何在在NPM发布一个React组件
前端·react.js·npm·npm组件·npm发布·npm发布组件·npm如何发布组件