手动实现 React-Redux 及代码展示

在 React 应用中，我们经常需要在不同的组件之间共享数据，例如用户数据、购物车商品列表等。为了实现这一目的，我们可以使用 Redux 进行状态管理。Redux 是一个 JavaScript 库，用于管理应用程序的状态，它可以帮助我们轻松地共享数据并在组件之间传递数据。

为了手动实现 React-Redux，我们需要：

1. 创建 Redux store

const store = createStore(reducer);

2. 编写 Redux action

const ADD_TODO = 'ADD_TODO';

const addTodo = (text) => {
  return {
    type: ADD_TODO,
    text,
  };
};

3. 编写 Redux reducer

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

4. 在 React 组件中使用 useSelector 和 useDispatch

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

const mapDispatchToProps = (dispatch) => {
  return {
    addTodo: (text) => dispatch(addTodo(text)),
  };
};

const TodoList = () => {
  const todos = useSelector(mapStateToProps);
  const dispatch = useDispatch();

  const handleClick = () => {
    dispatch(addTodo('Learn Redux'));
  };

  return (
    <div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <button onClick={handleClick}>Add Todo</button>
    </div>
  );
};

通过上述步骤，我们就可以手动实现 React-Redux 并进行状态管理。Redux 提供了强大的功能，可以帮助我们轻松地管理应用程序的状态，并在组件之间传递数据，从而使我们的代码更加整洁和易于维护。