React-Redux 老版本 connext的使用记录（只为记录）

画了五官的猕猴

已于 2023-09-09 12:29:32 修改

阅读量356

点赞数

分类专栏： react 初级学习文章标签： react.js javascript 前端

于 2023-09-09 11:23:54 首次发布

本文链接：https://blog.csdn.net/luoxiaonuan_hi/article/details/132775017

版权

注：新版 redux 用法中使用useSelector、useDispatch替代connect，这里只做老用法的记录使用。
Redux最新用法参考个人React专栏react初级学习

React-Redux是一个用于将React应用程序连接到Redux状态管理器的库。以下是React-Redux的简单用法示例：

安装React-Redux库

npm install react-redux

创建Redux store

创建Redux store，这是存储应用程序状态的地方。可以使用Redux createStore函数创建store。

import { createStore } from 'redux';

const initialState = {
  count: 0
};

const reducer = (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;
  }
};

const store = createStore(reducer);

创建React组件

创建一个React组件，将组件中需要的store中的状态传递给组件的props。可以使用React Redux提供的connect函数将组件连接到Redux store并订阅state更改。

import React from 'react';
import { connect } from 'react-redux';

const Counter = ({ count, increment, decrement }) => (
  <div>
    <h1>Count: {count}</h1>
    <button onClick={increment}>Increment</button>
    <button onClick={decrement}>Decrement</button>
  </div>
);

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

const mapDispatchToProps = {
  increment: () => ({ type: 'INCREMENT' }),
  decrement: () => ({ type: 'DECREMENT' })
};

export default connect(
  mapStateToProps,
  mapDispatchToProps