用React Hooks、Redux打造简单存储方案：新手入门

2023-10-02 18:24:40

React Hooks和Redux可谓前端开发的两大中流砥柱，它们通力合作，可以为您的React应用程序带来强大而灵活的状态管理解决方案。本文将重点介绍如何利用React Hooks和Redux来构建一个简单的存储方案，帮助您轻松管理应用程序的状态。

1. Redux基本原理

Redux是一种流行的状态管理工具，它通过单一数据存储来管理整个应用程序的状态。其核心思想是将应用程序的状态存储在中央存储库中，并提供一系列方法来读取和修改这个存储库。

2. Redux实践操作

1. 安装Redux和React Hooks

npm install redux react-redux

2. 创建Redux存储库

import { createStore } from 'redux';

const store = createStore(reducer);

3. 定义action创建器

const incrementCounter = () => ({ type: 'INCREMENT_COUNTER' });

4. 定义reducer

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

5. 使用React Hooks

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

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

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(incrementCounter())}>Increment</button>
    </>
  );
};

export default Counter;