react中使用redux管理状态流程

最新推荐文章于 2025-05-28 12:08:56 发布

转载最新推荐文章于 2025-05-28 12:08:56 发布 · 197 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhang134you/p/10616718.html

文章标签：

#javascript #面试 #ViewUI

本文介绍如何使用Redux进行状态管理，包括安装Redux、定义状态存储对象及在React组件中使用Redux实现状态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在项目中安装redux插件

npm install redux -S

2、针对单独的view组件定义store状态存储对象，参数为对状态的更新操作函数

import { createStore } from 'redux';

const reducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT': return state + 1;
    case 'DECREMENT': return state > 0 ? state - 1 : state;
    default: return state;
  }
};

const store = createStore(reducer);
export default store;

3、在view组件中引入store状态存储对象，并且在constructor中监听状态的变化，更新view上的数据

import React, { Component } from 'react';

import store from './store';  //引入状态对象

class App extends Component {
  constructor(props){
    super(props);
    this.state = {   
      count:store.getState()   //获取状态数据
    }
    store.subscribe(() => {   //监听状态变化更新数据
      this.setState({
        count:store.getState()
      })
    })
  }

  onIncrement = () => {  //分发状态更新
    store.dispatch({
      type:'INCREMENT'
    })
  }

  onDecrement = () => { //分发状态更新
    store.dispatch({
      type:'DECREMENT'
    })
  }

  render() {
    return (
      <div>
          <h1>{this.state.count}</h1>   <!--展示数据-->
          <button onClick={this.onIncrement}>+</button>
          <button onClick={this.onDecrement}>-</button>
      </div>
    );
  }
}
export default App;

转载于:https://www.cnblogs.com/zhang134you/p/10616718.html