React Redux 教程

React Redux 是一个流行的库，用于将 Redux 状态管理集成到 React 应用中。Redux 是一个独立的状态管理库，用于JavaScript应用。本教程将带您了解如何在React中使用Redux。

简介

Redux 是一个用于JavaScript应用程序的状态管理库。它通过中央状态存储来集中管理应用程序的状态。React Redux 是一个用于连接React和Redux的库。

安装

首先，确保您已经安装了Node.js和npm。然后，在您的React项目中安装Redux和React Redux：

npm install redux react-redux

创建 Redux Store

在您的项目中创建一个 store.js 文件，并初始化Redux存储：

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

创建 Actions 和 Reducers

Actions 是将信息从组件传递到Redux存储的载体。Reducers 是用来处理actions并更新存储状态的函数。

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

// reducers.js
import { increment, decrement } from './actions';

const initialState = {
  count: 0
};

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

连接 Redux 到 React

使用 Provider 组件从 react-redux 库连接Redux到React：

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')
);

在组件中使用 Redux

在您的React组件中，您可以使用 connect 高阶组件或 useDispatch 和 useSelector 钩子来访问Redux存储。

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
};

export default Counter;

React Redux 教程

简介

安装

创建 Redux Store

创建 Actions 和 Reducers

连接 Redux 到 React

在组件中使用 Redux

更多资源