MENU

React学习笔记【17】

第二十节

Redux

解决React数据管理(状态管理),用于中大型,数据比较庞大,组件之间数据交互多的情况下使用。
如果你不知道是否需要使用Redux,那么就不需要使用它

  • 解决组件的数据通信
  • 解决数据和交互多的应用

Redux只是一种状态管理的解决方案

Redux关键字

store:数据仓库,保存数据的地方。
state:是一个对象,数据仓库里的所有数据都放到一个state里。
action:一个动作,触发数据改变的方法。
dispatch:将动作触发成方法。
reducer:是一个函数,通过获取动作,改变数据,生成一个新的state,从而改变页面。

安装Redux

npm install redux --save

Redux使用步骤

reducer用于判断操作并返回state
使用reducer创建仓库
使用dispatch修改数据
在组件中使用store.getState()获取仓库中的state
通过store.subscribe()监听状态变化

Redux函数

初始化数据:createStore()
获取数据:store.getState()
修改数据(通过动作修改数据):store.dispatch()
修改视图(监听数据变化,重新渲染内容):store.subscribe()

本节代码

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux'

//用于通过动作创建新的state
//reducer两个作用:初始化数据、获取动作改变数据
const reducer = function (state = { num: 0 }, action) {
    console.log(action);
    switch (action.type) {
        case "increment":
            state.num++;
            break;
        case "decrement":
            state.num--;
            break;
        default:
            break;
    }
    //解构重新创建对象
    return { ...state };
}

//创建仓库
const store = createStore(reducer);

function increment() {
    //通过仓库的方法dispatch进行修改数据
    store.dispatch({ type: "increment", data: { id: 1, msg: "hello world" } });
}

function decrement() {
    //通过仓库的方法dispatch进行修改数据
    store.dispatch({ type: "decrement" });
}

//函数式计数器
const Counter = function (props) {
    let state = store.getState();
    return (
        <div>
            <h1>计数数量:{state.num}</h1>
            <button onClick={increment}>计数+1</button>
            <button onClick={decrement}>计数-1</button>
        </div>
    )
}

ReactDOM.render(
    <Counter />,
    document.getElementById('root')
);

//监听数据
store.subscribe(() => {
    ReactDOM.render(
        <Counter />,
        document.getElementById('root')
    );
})

文章标题:React学习笔记【17】
如果文中内容侵犯了您的权益,请及时与博主取得联系进行删除!
本站文章未经许可禁止转载,本文地址:https://blog.wanvale.com/archives/279/

Archives QR Code Tip
QR Code for this page
Tipping QR Code