当前位置: 首页 > article >正文

React基础之Redux

Redux是React中最常用的集中状态管理工具,类似于vue中的Pinia或是vuex,可以独立于框架运行

需要先安装两个插件

Redux Toolkit:简写书写方式

react-redux:连接Redux与React组件的中间件

安装

 npm i @reduxjs/toolkit  react-redux

创建一个store目录结构index导出子模块,再创建一个modules目录,用于存放index.js的所有子模块

实例代码

项目结构

首先,在countStore.js中

import {

    createSlice

} from "@reduxjs/toolkit";

const countStore=createSlice({

    name: 'counter',

    //初始化状态

    initialState: {

        count: 0

    },

    //编写修改数据的方法 同步方法,支持直接修改

    reducers: {

        increment(state) {

            state.count++

        },

        decrement(state){

            state.count--

        }

    }

})

//解构出来actionCreater函数

const {increment,decrement}=countStore.actions

//获取reducer

const reducer=countStore.reducer

//按需导出的方式导出actionCreater

export {increment,decrement}

//以默认导出的方式导出reducer

export default reducer

在store的导出index.js中

import { configureStore } from "@reduxjs/toolkit";

//导入子模块reducer

import counterStore from './modules/counterStore'

const store= configureStore({

    reducer:{

        counter:counterStore

    }

})

export default store

在主入口index.js中

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

import store from './store';

import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <Provider store={store}>

        <App />

    </Provider>

 

  </React.StrictMode>

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: Measuring Performance | Create React App

reportWebVitals();

在需要使用redux的app.js中

import React, { useState } from 'react';

import { useEffect } from 'react';

import { useDispatch, useSelector } from 'react-redux';

//导入actionCreeater

import { increment,decrement } from './store/modules/counterStore';

function App() {

  const{count}=useSelector(state=>state.counter)

  const dispatch=useDispatch()

  return (

    <div>

      <button onClick={()=>dispatch(decrement())}>--</button>

      {count}

      <button onClick={()=>dispatch(increment())}>++</button>

    </div>

  );

}

export default App;

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

提交action传参

首先在reducers方法中,新增一个方法,并且多一个参数,在其他地方调用这个方法的时候,传递对于的参数即可

首先,在countStore.js中

import {

    createSlice

} from "@reduxjs/toolkit";

const countStore=createSlice({

    name: 'counter',

    //初始化状态

    initialState: {

        count: 0

    },

    //编写修改数据的方法 同步方法,支持直接修改

    reducers: {

        increment(state) {

            state.count++

        },

        decrement(state){

            state.count--

        },

        addtoNum(state,action){

            state.count=action.payload

        }

    }

})

//解构出来actionCreater函数

const {increment,decrement,addtoNum}=countStore.actions

//获取reducer

const reducer=countStore.reducer

//按需导出的方式导出actionCreater

export {increment,decrement,addtoNum}

//以默认导出的方式导出reducer

export default reducer

在store的导出index.js中

import { configureStore } from "@reduxjs/toolkit";

//导入子模块reducer

import counterStore from './modules/counterStore'

const store= configureStore({

    reducer:{

        counter:counterStore

    }

})

export default store

在主入口index.js中

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

import store from './store';

import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <Provider store={store}>

        <App />

    </Provider>

 

  </React.StrictMode>

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: Measuring Performance | Create React App

reportWebVitals();

在需要使用redux的app.js中

import React, { useState } from 'react';

import { useEffect } from 'react';

import { useDispatch, useSelector } from 'react-redux';

//导入actionCreeater

import { increment,decrement,addtoNum } from './store/modules/counterStore';

function App() {

  const{count}=useSelector(state=>state.counter)

  const dispatch=useDispatch()

  return (

    <div>

      <button onClick={()=>dispatch(decrement())}>--</button>

      {count}

      <button onClick={()=>dispatch(increment())}>++</button>

      <button onClick={()=>dispatch(addtoNum(10))}>addTo10</button>

      <button onClick={()=>dispatch(addtoNum(20))}>addTo20</button>

    </div>

  );

}

export default App;

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

异步状态操作

将异步方法定义到store中,使用axios发送请求

channeStore.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

        }

    }

})

const {setChannels}=channelStore.actions

//异步请求部分

const fetchChannelList=()=>{

    return async(dispatch)=>{

      const res=await axios.get('http://geek.itheima.net/v1_0/channels')

      dispatch(setChannels(res.data.data.channels))

    }

}

export {fetchChannelList}

const reducers=channelStore.reducer

export default reducers

store下的index.js为

import { configureStore } from "@reduxjs/toolkit";

//导入子模块reducer

import channelStore from './modules/channelStore'

const store= configureStore({

    reducer:{

        channel:channelStore

    }

})

export default store

src下的index.js为

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

import store from './store';

import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <Provider store={store}>

        <App />

    </Provider>

 

  </React.StrictMode>

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: Measuring Performance | Create React App

reportWebVitals();

App.js为

import { useEffect } from 'react';

import { useDispatch, useSelector } from 'react-redux';

import { fetchChannelList } from './store/modules/channelStore';

function App() {

  const dispatch=useDispatch()

 const {channelList} =useSelector(state=>state.channel)

 //使用useEffect触发异步请求

 useEffect(()=>{

    dispatch(fetchChannelList())

 },[dispatch])

  return (

    <div>

      <ul>

        {channelList.map(item=><li key={item.id}>{item.name}</li>)}

      </ul>

    </div>

  );

}

export default App;


http://www.kler.cn/a/576201.html

相关文章:

  • wx122基于ssm+vue+uniapp的食堂线上预约点餐系统小程序
  • 【Python机器学习】1.7. 逻辑回归理论(进阶):多维度(因子)逻辑回归问题、决策边界、交叉熵损失函数、最小化损失函数
  • 26-小迪安全-模块引用,mvc框架,渲染,数据联动0-rce安全
  • go切片定义和初始化
  • VUE2表单检验及提示的消除
  • 迷你世界脚本自定义UI接口:Customui
  • dify中使用NL2SQL
  • 更新Vim使其支持系统剪切板
  • 探秘沃尔什-哈达玛变换(WHT)原理
  • 【蓝桥杯】每天一题,理解逻辑(3/90)【Leetcode 快乐数】
  • 初识Qt · 信号与槽 · 基础知识
  • K8s 1.27.1 实战系列(四)验证集群及应用部署测试
  • Redis 中配置账号密码是通过设置 `requirepass` 参数来实现
  • 解决VMWare无法打开虚拟机——内部错误
  • NewStar CTF week3 web wp
  • 【算法系列】桶排序算法介绍及实现
  • 永洪科技深度分析实战,零售企业的销量预测
  • MySQL 数据目录迁移导致启动失败
  • 【前端基础】Day 10 CSS3-2D3D
  • VSCode SSH中删除指定IP的方法