React 中如何使用 react-redux 连接 React 和 Redux？

推荐答案

在 React 中使用 react-redux 连接 React 和 Redux 的步骤如下：

1. 安装 react-redux 和 redux： 首先，确保你已经安装了 react-redux 和 redux 库。如果没有安装，可以使用以下命令进行安装：

   npm install react-redux redux

2. 创建 Redux Store： 使用 redux 创建一个 Redux store，并定义 reducer 函数。

   // www.javascriptcn.com code example
   import { createStore } from 'redux';
   
   // 定义 reducer 函数
   const initialState = { count: 0 };
   function counterReducer(state = initialState, action) {
     switch (action.type) {
       case 'INCREMENT':
         return { count: state.count + 1 };
       case 'DECREMENT':
         return { count: state.count - 1 };
       default:
         return state;
     }
   }
   
   // 创建 store
   const store = createStore(counterReducer);

3. 使用 Provider 包裹应用： 在应用的根组件中使用 react-redux 提供的 Provider 组件，并将 store 作为 prop 传递给它。

   // www.javascriptcn.com code example
   import React from 'react';
   import ReactDOM from 'react-dom';
   import { Provider } from 'react-redux';
   import App from './App';
   
   ReactDOM.render(
     <Provider store={store}>
       <App />
     </Provider>,
     document.getElementById('root')
   );

4. 使用 connect 连接组件： 使用 react-redux 提供的 connect 函数将 React 组件连接到 Redux store。connect 函数接受两个参数：mapStateToProps 和 mapDispatchToProps。

   // www.javascriptcn.com code example
   import React from 'react';
   import { connect } from 'react-redux';
   
   function Counter({ count, increment, decrement }) {
     return (
       <div>
         <p>{count}</p>
         <button onClick={increment}>+</button>
         <button onClick={decrement}>-</button>
       </div>
     );
   }
   
   const mapStateToProps = (state) => ({
     count: state.count,
   });
   
   const mapDispatchToProps = (dispatch) => ({
     increment: () => dispatch({ type: 'INCREMENT' }),
     decrement: () => dispatch({ type: 'DECREMENT' }),
   });
   
   export default connect(mapStateToProps, mapDispatchToProps)(Counter);

本题详细解读

1. 安装 react-redux 和 redux

react-redux 是 React 和 Redux 之间的桥梁，它提供了 Provider 和 connect 等工具，使得在 React 组件中使用 Redux 变得更加方便。redux 是状态管理库，负责管理应用的状态。

2. 创建 Redux Store

Redux store 是应用的状态容器，它通过 createStore 函数创建。createStore 接受一个 reducer 函数作为参数，reducer 函数定义了如何根据 action 更新 state。

3. 使用 Provider 包裹应用

Provider 是 react-redux 提供的一个高阶组件，它接收 store 作为 prop，并将其传递给应用中的所有组件。这样，任何被 connect 连接的组件都可以访问到 Redux store。

4. 使用 connect 连接组件

connect 是 react-redux 提供的一个函数，用于将 React 组件连接到 Redux store。它接受两个参数：

• mapStateToProps：将 Redux store 中的 state 映射到组件的 props。
• mapDispatchToProps：将 dispatch 函数映射到组件的 props，使得组件可以派发 action。

通过 connect 函数，组件可以访问 Redux store 中的 state，并且可以派发 action 来更新 state。