从入门到精通 Redux：基础知识速成

前端

2023-11-19 23:46:13

简介

Redux是一个流行的状态管理库，用于管理React和JavaScript应用程序中的应用程序状态。它遵循单向数据流的原则，提供了一种结构化且可预测的方式来管理和更新应用程序数据。

Redux基础

Store

Redux中所有的数据都存储在一个名为store的中心化容器中。store本质上是一个状态树，保存了应用程序中所有对象的状态。应用程序中的任何组件都可以直接从store中获取特定对象的状态。

State

State是应用程序中存储的数据的集合。它是一个不可变的对象，这意味着一旦创建，就不能被直接更改。要更新state，必须使用Redux提供的特定方法。

Actions

Actions是用于应用程序中发生事件的对象。它们是唯一可以改变state的方法。Actions通常包含一个type属性和一个可选的payload，其中包含要更新state所需的数据。

Redux工作流程

Redux工作流程遵循以下步骤：

组件从store中获取state。
组件分发action。
reducer处理action并返回一个新的state。
新的state被存储在store中。
组件重新渲染，反映新的state。

示例

让我们考虑一个简单的计数器应用程序。我们有一个包含计数器状态的store，以及一个可以增加计数器的按钮。

store.js

import { createStore } from 'redux';

const initialState = {
  count: 0,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT_COUNT':
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

component.js

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Component = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      console.log('State updated: ', store.getState());
    });

    return () => {
      unsubscribe();
    };
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT_COUNT' })}>+</button>
    </div>
  );
};

export default Component;