redux如何使⽤?

╰+攻爆jí腚メ 2022-12-11 15:11 140阅读 0赞

在下⾯的场景中，引⼊  Redux  是⽐较明智的：

1、你有着相当⼤量的、随时间变化的数据；

2、你的  state  需要有⼀个单⼀可靠数据来源；

3、你觉得把所有  state  放在最顶层组件中已经⽆法满⾜需要了。

4、某个组件的状态需要共享。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfbWlueA_size_16_color_FFFFFF_t_70][]

安装redux

npm install redux --save

⽤⼀个累加器举例

1.  需要⼀个 store 来存储数据

2. store ⾥的 reducer 初始化 state 并定义 state 修改规则

3.  通过 dispatch ⼀个 action 来提交对数据的修改

4. action 提交到 reducer 函数⾥，根据传⼊的 action 的 type ，返回新的 state

创建store，src/store/ReduxStore.js
    
    import {createStore} from 'redux'
    const counterReducer = (state = 0, action) => {
     switch (action.type) {
     case 'ADD':
     return state + 1
     case 'MINUS':
     return state - 1
     default:
     return state
     }
    }
    const store = createStore(counterReducer)
    export default store

创建ReduxPage
    
    import React, { Component } from "react";
    import store from "../store/ReduxStore";
    export default class ReduxPage extends Component {
     componentDidMount() {
       store.subscribe(() => {
         console.log("subscribe");
         this.forceUpdate();
         //this.setState({});
       });
     }
     add = () => {
       store.dispatch({ type: "ADD" });
     };
     minus = () => {
      store.dispatch({ type: "MINUS" });
     };
     render() {
       console.log("store", store);
       return (
         <div>
           <h3>ReduxPage</h3>
           <p>{store.getState()}</p>
           <button onClick={this.add}>add</button>
           <button onClick={this.minus}>minus</button>
         </div>
       );
     }
    }

还可以在 src/index.js 的 render ⾥订阅状态变更

import store from './store/ReduxStore'
    const render = ()=>{
     ReactDom.render(
     <App/>,
     document.querySelector('#root')
     )
    }
    render()
    store.subscribe(render)

1. createStore  创建 store

2. reducer  初始化、修改状态函数

3. getState  获取状态值

4. dispatch  提交更新

5. subscribe  变更订阅

原文：视频笔记

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfbWlueA_size_16_color_FFFFFF_t_70]: /images/20221123/44deb6ed1853451d8609d47d60e0ea84.png