526互联

Redux入门

发布时间 2023-03-30 10:08:40作者: is橙子

一、认识Redux

二、创建Redux第一个程序

2.1、安装命令

安装稳定版：

npm install --save redux

npm i redux

2.2、创建一个文件夹reduxstate

1、在文件下创建一个counterStore.js

// import {createStore} from 'redux' 已废弃

import counterReducer, { initState } from "./counterReducer";
import { legacy_createStore as createStore } from "redux";

// 创建存储对象
const store =createStore(counterReducer,initState);
export default store;
View Code

2、在文件下创建一个counterReducer.js

// 初始状态
export const initState={
    count:0
}
export default function counterReducer(preState,{type,payload}){
    
    switch (type){
        case "increment":
            return {count:preState.count+payload};
        case "decrement":
            return {count:preState.count-payload};
         case "reset":
            return initState;
         default :
         return initState;        
    }
}
View Code

3、创建一个ReduxCounter.jsx组件

import React, { Component } from 'react'
import store from './reduxstate/counterStore'
export default class ReduxCounter extends Component {
  incHandler=e=>{
    store.dispatch({type:"increment",payload:5});
    console.log(store.getState().count);
  }
  componentDidMount(){
    store.subscribe(() => {
      this.setState({})
    })
  }
  render() {
    return (
      <div style={{background:"yellow"}}>
        <h2>计数器A -{store.getState().count}</h2>
        <h3>redux不会更新render方法</h3>
        <button onClick={this.incHandler}>加5</button>
      </div>
    )
  }
}

 不会自动更新，所以需要加上：

componentDidMount(){
    store.subscribe(() => {
      this.setState({})
    })
  }

解释：

这是React中的代码，componentDidMount()是React组件的生命周期方法之一，当组件挂载后会自动调用。store.subscribe()是Redux中的方法，用于订阅Redux store的变化。setState()是React组件中的方法，用于更新组件的状态。这段代码的作用是在组件挂载后订阅Redux store的变化，并在store数据发生变化时更新组件的状态。

2.3、改进后的代码

import React, { Component } from 'react'
import store from './reduxstate/counterStore'
export default class ReduxCounter extends Component {
  incHandler=e=>{
    let value=e.target.attributes.payload.nodeValue*1;
    store.dispatch({type:"increment",payload:value});
    // console.log(store.getState().count);
  }
  oddIncHandle=()=>{
    let {count}=store.getState();
    if(count%2===1){
    store.dispatch({type:"increment",payload:-8})
}
  }
  asyncDecHandle=e=>{
    this.timer=setTimeout(()=>{
      store.dispatch({type:"increment",payload:9})
    })
  }
  componentDidMount(){
    store.subscribe(() => {
      this.setState({})
    })
  }
  componentWillUnmount(){
    clearTimeout(this.timer);
  }
  render() {
    return (
      <div style={{background:"yellow"}}>
        <h2>计数器A -{store.getState().count}</h2>
        <h3>redux不会更新render方法</h3>
        <button onClick={this.incHandler} payload="5">加5</button>
        <button onClick={this.incHandler} payload="-3">减3</button>
        <button onClick={this.oddIncHandle} >奇数加9</button>
        <button onClick={this.asyncDecHandle} >异步减9</button>
      </div>
    )
  }
}
View Code