Redux 自定义解决方案：公共和私有状态-FunTeaLearn Online Web Tutorials

前言

Redux 是一个流行的状态管理库，它提供了一种可预测的状态管理方式，使得应用程序的状态易于理解和调试。但是，Redux 并没有提供完整的解决方案，因为它并没有涉及到应用程序中的所有状态。在某些情况下，我们可能需要自定义 Redux 解决方案，以满足应用程序的需求。

在这篇文章中，我们将介绍 Redux 自定义解决方案的两种方式：公共状态和私有状态。我们将详细讨论这两种方式，并提供示例代码以帮助您更好地理解。

公共状态

公共状态是指在应用程序中共享的状态。例如，在一个购物车应用程序中，购物车的内容是公共状态，因为它需要在多个组件之间共享。在 Redux 中，公共状态通常存储在全局状态树中，并通过 Redux 的 connect 函数将其连接到组件中。

实现公共状态

要实现公共状态，我们需要定义一个 Redux reducer，该 reducer 将处理公共状态的所有操作。下面是一个示例 reducer：

// www.javascriptcn.com code example
const initialState = {
  cartItems: []
};

function cartReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TO_CART':
      return {
        ...state,
        cartItems: [...state.cartItems, action.payload]
      };
    case 'REMOVE_FROM_CART':
      return {
        ...state,
        cartItems: state.cartItems.filter(item => item.id !== action.payload.id)
      };
    default:
      return state;
  }
}

在这个 reducer 中，我们定义了一个名为 cartReducer 的函数，并将其初始化为 initialState。此初始状态包含一个空的 cartItems 数组。接下来，我们定义了两个 action：ADD_TO_CART 和 REMOVE_FROM_CART。ADD_TO_CART action 用于将商品添加到购物车中，而 REMOVE_FROM_CART action 用于从购物车中删除商品。

在处理这些 action 时，我们使用了 Redux 的不可变性原则，即在更新状态时，我们始终创建一个新的对象。这样可以避免直接修改原始对象，从而确保状态的可预测性。

使用公共状态

要使用公共状态，我们需要使用 Redux 的 connect 函数将其连接到组件中。下面是一个示例组件：

// www.javascriptcn.com code example
import React from 'react';
import { connect } from 'react-redux';

function Cart({ cartItems, addToCart, removeFromCart }) {
  return (
    <div>
      <h2>Cart</h2>
      <ul>
        {cartItems.map(item => (
          <li key={item.id}>
            {item.name} - ${item.price}
            <button onClick={() => removeFromCart(item)}>Remove</button>
          </li>
        ))}
      </ul>
      <button onClick={() => addToCart({ id: 1, name: 'Product 1', price: 10 })}>
        Add to Cart
      </button>
    </div>
  );
}

function mapStateToProps(state) {
  return {
    cartItems: state.cartItems
  };
}

function mapDispatchToProps(dispatch) {
  return {
    addToCart: item => dispatch({ type: 'ADD_TO_CART', payload: item }),
    removeFromCart: item => dispatch({ type: 'REMOVE_FROM_CART', payload: item })
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Cart);

在这个组件中，我们使用 connect 函数连接了 cartItems 状态和 addToCart、removeFromCart 函数。这样，我们就可以在组件中使用这些状态和函数了。

私有状态

私有状态是指在组件内部管理的状态。例如，在一个表单组件中，表单的值是私有状态，因为它只与该组件相关。在 Redux 中，私有状态通常存储在组件的状态中，并通过 setState 函数进行管理。

实现私有状态

要实现私有状态，我们需要在组件中定义一个状态对象，并使用 setState 函数来更新它。下面是一个示例组件：

// www.javascriptcn.com code example
import React, { useState } from 'react';

function Form() {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

  function handleInputChange(event) {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
  }

  function handleSubmit(event) {
    event.preventDefault();
    console.log(formData);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input type="text" name="username" value={formData.username} onChange={handleInputChange} />
      </label>
      <label>
        Password:
        <input type="password" name="password" value={formData.password} onChange={handleInputChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

在这个组件中，我们定义了一个名为 formData 的状态对象，并将其初始化为一个包含 username 和 password 字段的空对象。我们还定义了一个 handleInputChange 函数，在输入框的值发生变化时更新 formData 对象。最后，我们定义了一个 handleSubmit 函数，在表单提交时打印 formData 对象。

使用私有状态

要使用私有状态，我们只需要在组件中使用 setState 函数来更新它。下面是一个示例：

// www.javascriptcn.com code example
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function handleIncrement() {
    setCount(count + 1);
  }

  function handleDecrement() {
    setCount(count - 1);
  }

  return (
    <div>
      <h2>Counter</h2>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
}

export default Counter;

在这个组件中，我们定义了一个名为 count 的私有状态，并将其初始化为 0。我们还定义了两个函数，handleIncrement 和 handleDecrement，分别用于增加和减少 count 的值。在这些函数中，我们使用 setState 函数来更新 count 的值。

结论

在这篇文章中，我们介绍了 Redux 自定义解决方案的两种方式：公共状态和私有状态。我们详细讨论了这两种方式，并提供了示例代码以帮助您更好地理解。希望这篇文章对您有所帮助，让您更好地理解 Redux 和状态管理。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/676ce5e882fcee791c61bc19

Redux 自定义解决方案：公共和私有状态

前言