redux与react-redux
前言
工作中Vue为主，React使用逐渐生疏，对redux仅达到会用的地步。偶尔遇到React项目，用到redux也就是把别人写过的东西重写一遍，最近有时间去B站白嫖了一下 React教程。写个笔记记录下！！！
一、redux和react-redux是啥？
redux是 JavaScript 状态容器，提供可预测化的状态管理，是一个独立的库可以搭配UI框架进行使用。
与redux稍加不同的是，react-redux是 React 的官方 Redux UI 绑定库，可以订阅 store、检查更新数据和触发重新渲染的过程可以变得更加通用和可复用。
简单的说，react-redux最终还是使用redux去取数据，不过是封装一层方便使用redux的api。
相对于Vuex的简单无脑操作，这两个算是稍微麻烦一点的。不过后续阿里封装了个hox，使用起来感觉简单了很多。
二、redux使用步骤
1.引入库
代码如下（示例）：
npm install redux
2.原理图
actions
1）含义
Action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。
action返回的是Object类型的叫做同步action
action返回的是Function类型的叫做异步 action
异步action:
(1).明确：延迟的动作不想交给组件自身，想交给action
(2).何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回（非必须）
(3).具体编码：
1).cnpm i redux-thunk，并配置在store中，//行驶转换程序
2).创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务
3).异步任务有结果后，分发一个同步的action去真正的操作数据
(4).备注：异步action不是必须要写的，完全可以自己等待异步任务的结果再去分发同步action
2）demo
//redux文件夹下新建constant.js文件
/* 该模块适用于定义action对象中type类型的常量值
目的只有一个：便于管理的同时防止单词写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
export const SET_OPERATOR = 'setOperator'
//redux文件夹下新建action文件夹
//action下新建count_actions.js
/*
该文件专门为Count组件生成求和count_actions对象
*/
import {
INCREMENT, DECREMENT} from '../constant'
export const incrementAction = (data) => ({
type: INCREMENT, data })//同步action
//同步action，就是指action的返回值为Object类型的一般对象
export function decrementAction(data){
return {
type: DECREMENT,
data
}//返回的是一个对象，普通数据类型，同步action，返回对象为异步
}
//异步action，就是指action的返回值为函数
//异步action中，一般都会调用同步action，异步action不是必须要用的
export const incrementAsyncAction = (data, time) => {
return (dispatch)=>{
//返回对象为异步action
setTimeout(()=>{
dispatch(incrementAction(data))
}, time)
}
}
//action下新建user_action.js
import {
SET_OPERATOR } from '../constant'
export function setOperator(data){
return{
type: SET_OPERATOR,
data,
}
}
store.js
1）含义
store是一个状态管理器，是一个仓库，存储公共的状态数据。Redux 应用只有一个单一的 store
1）引入redux中的createStore函数，创建一个store
2）createStore调用时要传入一个为其服务的reducer
3）记得暴露store对象
4) redux只负责管理状态，至于状态的改变驱动着页面的展示要靠我们自己写
2）demo
//redux文件夹新建store.js
//引入creacteStore,专门用于创建redux中最核心的store对象,applyMiddleware执行中间件
import {
legacy_createStore as createStore, applyMiddleware} from "redux";
//引入redux-thunk用于支持异步action
import thunk from 'redux-thunk'
//引入为组件服务的reducer
import rootReducers from './reducers'
const store = createStore(rootReducers, applyMiddleware(thunk))
//暴露出去
export default store
reducer.js
1）含义
Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。
1）reducer的本质是一个函数，接收：preState,action,发布加工后的状态
2）reducer有两个作用：初始状态，加工状态
3）reducer被第一次调用时，是store自动触发的，传递的preState是undefined
2）demo
//redux文件夹下新建reducers文件夹
//新建count_reducer.js
import {
INCREMENT, DECREMENT} from '../constant'
//监测提交过来的action，preState是前一条数据，初始化时默认为0
const counter = (preState = 0,action)=>{
const {
type, data}= action
switch(type){
case INCREMENT:
return preState + data;
case DECREMENT:
return preState - data;
default:
return preState;
}
}
export default counter;
//redux文件夹下新建reducers文件夹
//新建user_reducer.js
import {
SET_OPERATOR } from '../constant'
const operator = (preState = {
}, action)=>{
const {
type, data}= action
switch(type){
case SET_OPERATOR:
return Object.assign(preState, data);
default :
return preState
}
}
export default operator;
//redux文件夹下新建reducers文件夹
//新建index.js
import {
combineReducers } from 'redux';
import counter from './count_reducer';
import operator from './user_reducer'
// 合并多个 reduce
const rootReducers = combineReducers({
counter:counter,
operator:operator
});
export default rootReducers;
Count.jsx
1）含义
操作组件，里面包含数据加减，和数据赋值两个功能
2）demo
import React, {
Component } from 'react'
import store from '../../redux/store'
//引入actionCreator，专门用于创建action对象
import {
incrementAction, decrementAction, incrementAsyncAction} from '../../redux/actions/count_actions'
import {
setOperator } from '../../redux/actions/user_action'
class Count extends Component {
state = {
}
//加
increment=()=>{
const {
value}=this.selectNumber
store.dispatch(incrementAction(value*1))
}
//减
decrement=()=>{
const {
value } = this.selectNumber
store.dispatch(decrementAction(value*1))
}
//当前求和的数据为奇数再加
incrementIfOdd=()=>{
const counter = store.getState().counter
const {
value } = this.selectNumber
if(counter % 2 !== 0) {
store.dispatch(incrementAction(value*1))
}
}
//异步加
incrementAsync=()=>{
const {
value } = this.selectNumber
// setTimeout(()=>{
store.dispatch(incrementAsyncAction(value*1, 3000))
// }, 2000)
}
addUserInfo = () => {
const operator = {
name: '大黄'+Math.floor(Math.random()*100),
age: Math.floor(Math.random()*100)
}
store.dispatch(setOperator(operator))
}
render() {
console.log(store.getState())
const counter = store.getState().counter
const operator = store.getState().operator
return (
<div>
<h1>当前求和为{
counter}</h1>
<select ref={
c=>this.selectNumber =c}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button onClick={
()=>{
this.increment()}}>+</button>
<button onClick={
()=>{
this.decrement()}}>-</button>
<button onClick={
()=>{
this.incrementIfOdd()}}>如果为奇数</button>
<button onClick={
()=>{
this.incrementAsync ()}}>异步增加 </button>
<div>
<button onClick={
()=>{
this.addUserInfo()}}>添加用户信息</button>
<div style={
{
display: operator?.name ? 'block' : 'none'}}>姓名：{
operator?.name},
年龄：{
operator?.age}</div>
</div>
</div>
)
}
}
export default Count;
//App.js
import Count from './components/Count'
function App() {
return (
<div className="App">
<Count/>
</div>
);
}
export default App;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import store from './redux/store'
import App from './App';
import {
Provider} from 'react-redux'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={
store}>
<App />
</Provider>
);
// 监听数据变化
store.subscribe(() => {
root.render(
<Provider store={
store}>
<App />
</Provider>
);
})
总结
代码捋顺了，按照官方给的思路去写简单的demo，应该也还行。东西有点多，react-redux另起一篇文章。