Redux入门指南

Redux 是一个用于Javascript应用的状态管理库，常与React结合使用。它提供了一种可预测的状态管理模式，使得应用状态的管理更加清晰和易于维护。

React主要关注用户界面的构建，专注于视图层（View），但并不涉及完整的Web应用解决方案。具体来说，React没有直接处理以下两个方面：

• 代码结构
• 组件间的通信

而Redux正好弥补了这些不足，提供了强大的状态管理和组件间通信的能力。

1. Store

Store是保存应用状态的地方。通过createStore函数可以创建一个新的Store对象。

import { createStore } from 'redux';
const store = createStore(reducer);
const state = store.getState();

createStore函数接收一个reducer函数作为参数，并返回一个新的Store对象。

2. Action

Action是描述发生了什么的对象。它是View发出的信号，表示State应该发生变化。

const action = {
  type: 'ADD_TODO',
  payload: 'Learn Redux'
};

3. Action Creator

Action Creator是一个生成Action的函数。

const ADD_TODO = 'ADD_TODO';
function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}
const action = addTodo('Learn Redux');

4. Dispatch

store.dispatch()是View发出Action的唯一方法。它告诉Store应该根据这个Action更新State。

import { createStore } from 'redux';
const store = createStore(reducer);
store.dispatch({
  type: 'ADD_TODO',
  payload: 'Learn Redux'
});

5. Reducer

Reducer是纯函数，它接收当前的State和Action，返回新的State。这是计算新状态的过程。

6. Subscribe

Store允许通过store.subscribe()方法设置监听函数，一旦State发生变化，就自动执行这个函数。

import { createStore } from 'redux';
const store = createStore(reducer);
store.subscribe(listener);

下面是一个简单的Redux示例，展示了如何在React中使用Redux。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

// React 组件
class Counter extends Component {
  render() {
    const { value, onIncreaseClick } = this.props;
    return (
      

        {value}
        Increase
      

    );
  }
}

// 属性验证
Counter.propTypes = {
  value: PropTypes.number.isRequired,
  onIncreaseClick: PropTypes.func.isRequired
};

// Action
const increaseAction = { type: 'increase' };

// Reducer
function counter(state = { count: 0 }, action) {
  switch (action.type) {
    case 'increase':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

// Store
const store = createStore(counter);

// Map Redux state to component props
function mapStateToProps(state) {
  return {
    value: state.count
  };
}

// Map Redux actions to component props
function mapDispatchToProps(dispatch) {
  return {
    onIncreaseClick: () => dispatch(increaseAction)
  };
}

// Connected Component
const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter);

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

《Redux入门教程》 - 阮一峰