react-redux使用

LINMO-ZHUNBEIWANBI

已于 2024-01-08 14:21:09 修改

阅读量67

点赞数

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

于 2023-04-16 16:48:47 首次发布

本文链接：https://blog.csdn.net/liuxiaocaogu/article/details/130184403

文章介绍了Redux在React应用中的数据管理流程，组件通过dispatchaction触发reducer更新状态，然后通过props将数据传递给子组件。使用connect函数将React组件与Reduxstore连接，实现状态的获取和修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单说一下redux，控制数据流分发给想要接收数据的组件。

主要是接收数据的组件通过dispatch一个action(action是一个对象，形式为{type:...,payload:...})，触发对应的reducer函数来更新数据进而更新视图

另外，store分发下的数据打入在props里面

store/index.jsx

import { createStore, combineReducers } from "redux";

import countReducer from './reducers/count'
import colorReducer from './reducers/color'


const reducers = combineReducers({
  count: countReducer,
  color: colorReducer
})


const store = createStore(reducers);
export default store;

store/reducers/count.js

export const countReducer = (state=0, action={}) => {
    const { type, payload = {} } = action;
    switch (type) {
      case "updateCount":
        const { count } = payload;
        return count;
      case "resetCount":
        return  0;
      default:
        return state;
    }
  };


export default countReducer;

pages/testReducer/index.jsx

import React, { Component } from "react";
import Parent from "./Parent";


export default class TestRedux extends Component {
  render() {
    return (
      <div>
          <div>test</div>
          <Parent />
      </div>
    );
  }
}

pages/testReducer/Parent/index.jsx

import React from "react";
import Child from "../Child";

const Parent = (props) => {
  console.log("parent", props);
  return (
    <div>
      parent: a: {props.a}
      <Child />
    </div>
  );
};

export default Parent;

pages/testReducer/Child/index.jsx

import React from "react";
import { connect } from 'react-redux'
class Child extends React.Component {
  handleClick = () => {
    const {dispatch, count} = this.props;
    dispatch({
      type: 'updateCount',
      payload: {
        count: count +1
      }
    })
  };
  render() {
    console.log("child", this.props);
    return (
      <div onClick={this.handleClick}>
        我是Child，我要显示来自最外层组件Test的数据count:{" "}
        {this.props.count}
      </div>
    );
  }
}

const mapStateToProps = ( { count }  ) =>{
  return {
    count, 
  }
}

export default connect(mapStateToProps)(Child)