一、认识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
标签:count,return,入门,import,Redux,payload,store From: https://www.cnblogs.com/ischengzi/p/17271359.html