全栈的自我修养 ———— 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;
相关推荐
yaoxin5211237 分钟前
211. Java 异常 - Java 异常机制总结
java·开发语言·python
Empty_7772 小时前
编程之python基础
开发语言·python
疯狂吧小飞牛3 小时前
Lua 中的 __index、__newindex、rawget 与 rawset 介绍
开发语言·junit·lua
寻星探路5 小时前
Java EE初阶启程记13---JUC(java.util.concurrent) 的常见类
java·开发语言·java-ee
哲Zheᗜe༘5 小时前
了解学习Python编程之python基础
开发语言·python·学习
落日漫游5 小时前
数据结构笔试核心考点
java·开发语言·算法
寻找华年的锦瑟6 小时前
Qt-配置文件(INI/JSON/XML)
开发语言·qt
HY小海6 小时前
【C++】AVL树实现
开发语言·数据结构·c++
workflower6 小时前
Fundamentals of Architectural Styles and patterns
开发语言·算法·django·bug·结对编程
Roc-xb6 小时前
ModuleNotFoundError: No module named ‘conda_token‘
开发语言·python·conda