11.2使用redux库的createStore()函数-React全家桶--前端开发与实例(下)

当前位置:　首页>> 技术小册>> React全家桶--前端开发与实例(下)

### 11.2 使用Redux库的`createStore()`函数

在React应用中，随着应用复杂度的提升，组件间的状态管理往往会成为一大挑战。Redux作为一个预测性状态容器，为JavaScript应用（特别是React应用）提供了一种高效的状态管理解决方案。Redux通过维护一个全局的state树，使得应用中的状态变得可预测且易于管理。而这一切的起点，便是通过`createStore()`函数创建Redux的store。

#### 11.2.1 理解Redux Store

在Redux中，**store**是保存应用所有state的地方，并且是唯一的地方。Redux提供`createStore(reducer, [preloadedState], [enhancer])`函数来创建一个store。这个函数是Redux的核心，几乎所有的Redux应用都会调用它来初始化state。

- **reducer**：一个函数，接收当前的state和一个action作为参数，返回一个新的state。它是Redux应用中的“纯函数”，确保每次调用时，给定相同的输入就返回相同的输出。
- **preloadedState**（可选）：初始化时的state。如果你使用服务器渲染（SSR）并且想要将服务器端生成的state同步到客户端，这个参数会非常有用。
- **enhancer**（可选）：Redux store增强器。它允许你通过中间件等形式来扩展Redux的功能。例如，`applyMiddleware()`就是一个常用的增强器，用于添加日志、崩溃报告、调用跟踪等功能。

#### 11.2.2 创建Store的基本步骤

首先，我们需要定义一个reducer。reducer函数描述了应用状态的变化逻辑，根据传入的action类型来返回新的state。

```javascript
// reducer.js
function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 };
    case 'DECREMENT':
      return { value: state.value - 1 };
    default:
      return state;
  }
}
```

接着，使用`createStore()`函数和上面定义的reducer来创建store。

```javascript
// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;
```

现在，我们已经拥有了一个Redux store，它包含了应用的初始状态（在这个例子中，是`{ value: 0 }`），并且准备好了根据传入的action来更新这个状态。

#### 11.2.3 访问和分发State与Action

在Redux应用中，通常不会直接修改store中的state，而是通过分发（dispatch）action来间接地更新state。每个action都是一个描述已发生事件的普通JavaScript对象。为了分发action并更新state，Redux提供了`store.dispatch()`方法。

```javascript
// 分发action来更新state
store.dispatch({ type: 'INCREMENT' });
console.log(store.getState()); // { value: 1 }

store.dispatch({ type: 'DECREMENT' });
console.log(store.getState()); // { value: 0 }
```

这里，`store.getState()`方法用于获取store当前的state。注意，Redux store的state是只读的，你不能直接修改它。相反，你应该通过分发action来请求修改。

#### 11.2.4 使用中间件扩展Store功能

Redux中间件提供了一种强大的机制来拦截action、执行代码、然后（可选地）将action传递给下一个中间件或reducer。这允许你编写能够执行各种任务（如日志记录、创建崩溃报告、调用API等）的代码，而不必修改action创建函数或reducer函数。

例如，使用`redux-thunk`中间件可以允许你分发函数作为action，这些函数可以异步地执行，如调用API并在数据返回后分发新的action。

```javascript
// 引入applyMiddleware和thunk中间件
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import counterReducer from './reducer';

const store = createStore(
  counterReducer,
  applyMiddleware(thunk)
);

// 现在可以分发函数作为action
function incrementIfOdd() {
  return (dispatch, getState) => {
    const { value } = getState();
    if (value % 2 === 1) {
      dispatch({ type: 'INCREMENT' });
    }
  };
}

store.dispatch(incrementIfOdd());
```

#### 11.2.5 结合React使用Redux

虽然Redux可以独立于React使用，但它在React应用中尤为强大。为了在React组件中使用Redux store，通常会使用`react-redux`库提供的`Provider`和`connect`函数。`Provider`组件使得Redux store在React组件树中可用，而`connect`函数则用于将React组件与Redux store连接起来，使得组件能够订阅Redux state的更新，并在state变化时重新渲染。

```javascript
// 引入Provider
import { Provider } from 'react-redux';
import store from './store';

// 根组件
function App() {
  return (
    <Provider store={store}>
      {/* 应用的其他组件 */}
    </Provider>
  );
}

export default App;
```

然后，你可以使用`connect`函数来包装你的组件，使其能够访问Redux store中的state和dispatch方法。

```javascript
// 引入connect
import { connect } from 'react-redux';

// 一个简单的React组件
function Counter({ value, increment, decrement }) {
  return (
    <div>
      <p>Count: {value}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

// 定义映射state到组件props的函数
function mapStateToProps(state) {
  return {
    value: state.value
  };
}

// 定义映射dispatch到组件props的函数
function mapDispatchToProps(dispatch) {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' })
  };
}

// 使用connect连接Redux store和React组件
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
```

#### 11.2.6 小结

通过`createStore()`函数，Redux为应用提供了一个集中管理状态的地方。结合Redux中间件和React-Redux库，React应用可以高效地处理复杂的状态管理需求，同时保持代码的清晰和可维护性。在Redux中，state的变更始终是可预测的，因为每个action都会按照相同的逻辑来更新state，这大大简化了应用的状态管理过程。希望本章内容能够帮助你更好地理解Redux的核心概念，并顺利地在React项目中应用它。

该分类下的相关小册推荐：

React全家桶--前端开发与实例(上)

ReactJS面试指南

剑指Reactjs

深入学习React实战进阶

React 进阶实践指南