ReactJS教程: 如何安装Redux库及Redux入门示例？

小蓝

2023 年 12 月 31 日

137 次浏览

暂无评论

3456字数

Linux 技术杂烩

安装Redux库与基础入门

一、安装Redux及配套库

在React项目中引入Redux，首要步骤是安装Redux及其React绑定库react-redux。

使用NPM（Node Package Manager）：

npm install redux react-redux

或者使用Yarn：

yarn add redux react-redux

这将安装Redux库并将其与React项目关联起来。

二、Redux架构概览

Redux是一个独立的状态管理库，可以与React结合使用，但本身并不依赖React。Redux采用单向数据流，其主要概念包括以下几个部分：

Action：是用来描述已发生事件的普通对象，通常包含type字段。
Reducer：是根据当前状态和给定的action计算并返回新状态的纯函数。
Store：是一个对象，它将Actions和Reducers联系在一起，保存状态，并在状态变更时通知UI。

三、基础示例

构建一个简单Redux管理状态的例子。

定义Actions
首先，定义一些actions。在 actions.js中输入：

// 定义增加计数的action类型
export const INCREMENT = 'INCREMENT';

// 返回增加计数的action对象
export const incrementCounter = () => ({
  type: INCREMENT
});

创建Reducer
在 reducer.js中，定义处理计数的reducer：

import { INCREMENT } from './actions';

// 初始化状态
const initialState = {
  count: 0
};

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

export default counterReducer;

配置Store
创建一个Redux store，将其与reducer绑定。在 store.js中：

import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

React组件使用Redux
在React组件中使用 react-redux提供的 Provider组件来使所有子组件可访问Redux store。同时使用 connect函数将React组件与Redux store相连接。

首先，包裹整个App组件：

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

function App() {
  return (
    <Provider store={store}>
      <Counter/>
    </Provider>
  );
}

export default App;

然后，创建一个计数器组件 Counter.js：

import React from 'react';
import { connect } from 'react-redux';
import { incrementCounter } from './actions';

function Counter({ count, incrementCounter }) {
  return (
    <div>
      <span>{count}</span>
      <button onClick={incrementCounter}>增加</button>
    </div>
  );
}

// 将Redux state映射到组件的props
const mapStateToProps = state => ({
  count: state.count
});

// 将action创建函数映射到props
const mapDispatchToProps = dispatch => ({
  incrementCounter: () => dispatch(incrementCounter())
});

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

四、运行示例

完成以上步骤后，通过运行React应用，应该可以看到一个计数器的界面，并且每点击一次“增加”按钮，计数就会增加。

总结

以上步骤介绍了Redux的基本概念，如何在React应用中安装Redux，以及一个简单的计数器示例，包括定义actions，创建reducers，创建store，并将其与React组件连接。可以通过这个过程来理解Redux是如何提供统一的状态管理，并通过action和reducer来控制应用的状态变化。