Redux与React环境准备、实现counter(及传参)、异步获取数据

环境说明:

一:说明
在React中使用redux,官方要求安装两个其他插件:Redux Toolkit和react-redux
1. Redux ToolKit(RTK) - 官方推荐编写Redux逻辑的方式,是一套工具的集合集,简化书写方式
(简化store的配置方式 内置immer支持可变式状态修改 内置thunk更好的异步创建)

2. react-redux - 用来链接Redux和React组件的中间件
        ----------> 获取状态
(Redux react-redux React组件)
        <--------- 更新状态


二:配置基础环境
1. 使用CRA快速创建React项目
npx create-react-app react-redux

2. 安装配套工具
npm i @reduxjs/toolkit react-redux

3. 启动项目
npm run start

三:创建store文件夹
在src下创建store文件夹,并在store文件夹下创建index.js文件和modules文件夹,modules文件夹下创建如counter.js文件,图片如下所示:

创建store文件夹

实现counter(及传参)

1. 在counterStore.js编写如下代码:
import { createSlice } from '@reduxjs/toolkit'

const counterStore = createSlice({
    name: 'counter',
    // 初始化state
    initialState: {
        count: 0
    },
    // 修改状态的方法 同步方法 支持直接修改
    reducers: {
        increment(state) {
            state.count++
        },
        decrement(state) {
            state.count--
        },
        incrementToTen(state, action) {
            console.log(action.payload); // 外层传的什么数据结构这里就是什么数据结构
            state.count += action.payload.number;
        }
    }
})

// 解构出来actionCreater函数
const {increment, decrement, incrementToTen} = counterStore.actions;
// 获取reducer
const reducer = counterStore.reducer;

// 以按需导出的方式导出actionCreater
export {increment, decrement, incrementToTen}

// 以默认导出的方式导出reducer
export default reducer;

2. 在store文件夹下index.js编写代码如下
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './modules/counterStore';

const store = configureStore({
    reducer: {
        counter: counterReducer
    }
})

export default store

3. 在src文件夹下index.js添加store配置

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import store from './store';
import { Provider } from 'react-redux';

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


4. 在组件内应用
import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement, incrementToTen } from './store/modules/counterStore';

function App() {
  const { count } = useSelector(state => state.counter) // 根据第二步命名进行解构(counter)
  const dispatch = useDispatch();

  const handleIncrement = () => {
    dispatch(increment())
  }

  const handleDecrement = () => {
    dispatch(decrement())
  }

  const handleIncrementToTen = () => {
    dispatch(incrementToTen({number: 10}));
  }

  return (
    <div className="App">
      {count}
      <button onClick={handleIncrement}>增加</button>
      <button onClick={handleDecrement}>减小</button>
      <button onClick={handleIncrementToTen}>增加按钮传参,默认加10</button>
    </div>
  );
}

export default App;






总结:
1. 组件中使用哪个hook函数获取store中的数据? useSelector
2. 组件中使用哪个hook函数获取dispatch方法?  useDispatch
3. 如何得到要提交action对象? 执行store模块中导出的actionCreater方法

异步获取数据

1. channelStore文件代码:

import { createSlice } from '@reduxjs/toolkit';

const channelStore = createSlice({
    name: 'channel',
    initialState: {
        channelList: []
    },
    reducers: {
        setChannels(state, payload) {
            state.channelList = action.payload
        }
    }
})

// 异步请求部分
const { setChannels } = channelStore.actions;

const fetchChannelList = () => {
    return async (dispatch) => {
        const res = await axios.get(url)
        dispatch(setChannels(res.data.data.channels))
    }
}

const reducer = channelStore.reducer;
export { fetchChannelList }
export default reducer;



2. src下store文件夹下index.js代码如下:

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './modules/counterStore';
import channerReducer from './modules/channelStore';

const store = configureStore({
    reducer: {
        counter: counterReducer,
        channerReducer
    }
})

export default store



3. 组件内应用代码如下:

import { useDispatch, useSelector } from 'react-redux';
import { fetchChannelList } from './store/modules/channelStore';
import { useEffect } from 'react';

function App() {
  const { channelList } = useSelector(state => state.channerReducer)
  const dispatch = useDispatch();

  useEffect(() => {
    // 获取列表数据
    dispatch(fetchChannelList())
  }, [dispatch])

  return (
    <div className="App">
      {channelList}
    </div>
  );
}

export default App;
相关推荐
耶啵奶膘17 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test5 小时前
js下载excel示例demo
前端·javascript·excel
Yaml45 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事5 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro