函数组件中react-redux基本使用
时间:2021-08-25
本文章向大家介绍函数组件中react-redux基本使用,主要包括函数组件中react-redux基本使用使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
安装:yarn add redux react-redux
1、定义store文件 store.js
import { createStore } from 'redux'; import reducer from './reducer'; const configureStore = () => createStore(reducer) export default configureStore;
2、定义reducer文件 reducer.js
const initialState = { menuName: '首页', current: '123123数据' } // eslint-disable-next-line import/no-anonymous-default-export export default (state = initialState, action) => { console.log('action', action) // 使用dispatch调用action中的方法会触发更新state 获取到action之后根据type的不同来更改不同的值 类似于action:{type: "SWITCH_MEUN", menuName: "订单管理"} switch (action.type) { case 'SWITCH_MEUN': return { ...state, // 保存上一个状态值的写法 menuName: action.menuName } case 'SWITCH_CURRENT': return { ...state, // 保存上一个状态值的写法 current: action.current } default: return { ...state } } }
3、使用Provider包裹 index.js (入口文件)
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { Provider } from 'react-redux' import configureStore from './store/index' const store = configureStore() ReactDOM.render( <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode>, document.getElementById('root') ); // 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: https://bit.ly/CRA-vitals reportWebVitals();
4、实际使用
使用useDispatch调用action修改数据
使用useSelector获取数据
import React from 'react' import {useDispatch, useSelector} from 'react-redux' export default function Header() { const dispatch = useDispatch() const current = useSelector((state) => { return state.current }) const changeCurrent = ()=> { dispatch({ type: 'SWITCH_CURRENT', current: '修改后的current' }) } return ( <div> 子组件 <h3>{current}</h3> <button onClick={changeCurrent}>修改current</button> </div> ) }
原文地址:https://www.cnblogs.com/cazj/p/15186278.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【奇技淫巧】-- 搜索旋转数组
- 【奇技淫巧】-- 原地旋转链表
- 【奇技淫巧】-- 盛水最多的容器
- 【leetcode两题选手】MySQL类题目(八)
- 【leetcode两题选手】MySQL类题目(七)
- 【leetcode两题选手】MySQL类题目(六)
- 【leetcode两题选手】MySQL类题目(五)
- 【leetcode两题选手】MySQL类题目(四)
- 【leetcode两题选手】MySQL类题目(三)
- 【leetcode两题选手】MySQL类题目(二)
- 剑指offer(01-03)题解
- mybatis动态sql之分支选择(学习choose、when、otherwise标签)
- 前后端分离使用pagehelper
- 还在手写单表的增删改查??还不快快使用通用mapper
- mybatis动态sql之遍历集合(学习foreach标签(初探))