超详细Redux入门攻略：从初学到精通

前端

2023-10-28 06:53:07

掌握 Redux：从入门到精通

随着 React 的风靡，其配套库 Redux 也备受瞩目。Redux 是一种 JavaScript 库，专门用于管理应用程序状态，让你轻松共享状态，提升代码可读性和维护性。

第一步：Redux 的本质

Redux 是基于 Flux 的开源 JavaScript 库，主要用于管理应用程序状态。它遵循一个简单理念：将应用程序状态存储在一个中央数据存储中（称为 store），该存储可由所有应用程序组件访问。

第二步：Redux 的基本概念

了解 Redux 前，需掌握一些基本概念：

Store： Redux 的核心，负责存储应用程序状态。
Action： 一个对象，表示应用程序状态的变化。
Reducer： 一个函数，处理 Action 并更新 Store。
Middleware（可选）： 一种可选中间件，用于在将 Action 分发到 Reducer 之前对其进行处理。

第三步：使用 Redux

1. 创建 Store

首先，创建一个 Store，使用 createStore() 函数，接收一个 Reducer 函数作为参数，用于处理 Action 并更新 Store。

import { createStore } from 'redux';

const reducer = (state = {}, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { counter: state.counter + 1 };
    case 'DECREMENT':
      return { counter: state.counter - 1 };
    default:
      return state;
  }
};

const store = createStore(reducer);

2. 分发 Action

创建 Store 后，即可分发 Action，使用 store.dispatch() 方法，传入一个 Action 对象。

store.dispatch({ type: 'INCREMENT' });

3. 获取 Store 状态

使用 store.getState() 方法获取 Store 中的状态。

const state = store.getState();

console.log(state);

第四步：Redux 与 React 的结合

Redux 和 React 可完美结合。使用 react-redux 库将 Redux 集成到 React 组件中，该库提供 Provider 和 connect() 组件，让你轻松连接 Redux 和 React 组件。

1. 安装 react-redux 库

npm install react-redux

2. 在 React 应用中使用 Provider 组件

Provider 组件是 react-redux 库的核心，负责连接 Redux Store 和 React 组件。在 React 应用中使用 Provider 组件。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

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

3. 使用 connect() 函数连接 Redux Store 和 React 组件

connect() 函数是 react-redux 库提供的另一个重要组件，用于连接 Redux Store 和 React 组件。可以在 React 组件中使用 connect() 函数。

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

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

const mapDispatchToProps = (dispatch) => {
  return {
    incrementCounter: () => dispatch({ type: 'INCREMENT' }),
    decrementCounter: () => dispatch({ type: 'DECREMENT' })
  };
};

const App = (props) => {
  return (
    <div>
      <h1>Counter: {props.counter}</h1>
      <button onClick={props.incrementCounter}>Increment</button>
      <button onClick={props.decrementCounter}>Decrement</button>
    </div>
  );
};

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