Redux 入门教程

Redux 是一个用于管理应用程序状态的库，它是 React.js 应用的核心库之一。下面是 Redux 的入门教程，包括基础概念和使用方法。

什么是 Redux？

Redux 是一个独立的状态管理库，可以用于任何 JavaScript 应用程序。它提供了一个集中式存储所有组件的状态，并以可预测的方式更新状态的方法。

安装 Redux

首先，你需要安装 Redux 和 React-Redux。你可以使用 npm 或 yarn 来安装它们。

npm install redux react-redux

或者

yarn add redux react-redux

创建 Store

在 Redux 中，所有组件的状态都存储在一个单一的 store 对象中。首先，你需要创建一个 store。

import { createStore } from 'redux';

const initialState = {
  count: 0
};

const store = createStore(reducer, initialState);

Action 和 Reducer

在 Redux 中，任何对 store 的更改都是通过 dispatch action 来实现的。一个 reducer 是一个函数，它接收当前的 state 和一个 action，并返回新的 state。

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

连接 React 和 Redux

你可以使用 react-redux 库中的 Provider 组件来连接 React 和 Redux。

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

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

获取和修改状态

你可以使用 store.getState() 来获取当前的状态，使用 store.dispatch(action) 来修改状态。

// 获取状态
const state = store.getState();

// 修改状态
store.dispatch({ type: 'INCREMENT' });

使用 React-Redux 组件

你可以使用 connect 高阶组件来将 Redux 中的状态和 dispatch 方法连接到 React 组件中。

import { connect } from 'react-redux';

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

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch({ type: 'INCREMENT' })
});

const Counter = connect(mapStateToProps, mapDispatchToProps)(CounterComponent);

总结

Redux 是一个强大的工具，可以帮助你管理大型应用程序的状态。希望这个教程能帮助你入门 Redux。

更多信息，请访问我们的 Redux 文档。