复盘：手写 Redux 和 React-Redux

2023-10-24 23:38:21

掌握 Redux 和 React-Redux 的终极指南

基本概念

Redux 是一种管理应用程序状态的 JavaScript 库。它遵循单一状态树原则，这意味着应用程序的整个状态都存储在一个称为 store 的中央对象中。store 是只读的，任何状态更改都必须通过分发 action 来实现。

action 是包含操作类型和可选数据的简单对象。reducer 是一个纯函数，它根据 action 和当前 state 计算新的 state。

数据流

Redux 的数据流涉及以下步骤：

用户触发一个动作，例如单击按钮。
action 被分发到 store。
reducer 根据 action 和当前 state 计算新的 state。
store 更新为新的 state。
组件重新渲染，以反映新的 state。

创建 Store

要使用 Redux，首先需要创建一个 store。store 是一个包含应用程序整个 state 的 JavaScript 对象。可以使用 createStore() 函数创建 store，如下所示：

import { createStore } from 'redux';

const store = createStore(reducer);

分发 Action

action 是一个包含操作类型和可选数据的简单对象。可以使用 dispatch() 方法分发 action，如下所示：

store.dispatch({
  type: 'ADD_TODO',
  text: 'Learn Redux'
});

编写 Reducer

reducer 是一个纯函数，它根据 action 和当前 state 计算新的 state。reducer 必须是纯函数，这意味着它不能产生副作用，也不能修改 action 或 state。可以使用 switch 语句编写 reducer，如下所示：

function reducer(state = {}, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.text]
      };
    default:
      return state;
  }
}

集成到 React 应用程序

要将 Redux 集成到 React 应用程序中，可以使用 react-redux 库。react-redux 提供了 Provider 和 connect() 两个组件，可以将 Redux store 与 React 组件连接起来。

Provider

首先需要在应用程序的根组件中包裹 Provider，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

connect

可以使用 connect() 函数将 Redux store 与 React 组件连接起来，如下所示：

import React, { Component } from 'react';
import { connect } from 'react-redux';

class TodoList extends Component {
  render() {
    return (
      <ul>
        {this.props.todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    todos: state.todos
  };
};

export default connect(mapStateToProps)(TodoList);