React使用react-redux数据共享

下载依赖：

npm i redux

npm i react-redux

npm i redux-thunk

npm i redux-devtools-extension

在src目录下新建文件，如图

 文件说明：

store.js:该文件专门用于暴露一个store对象，整个应用只有一个store对象

constant.js:便于管理，防止程序员单词写错

reducer:变量初始化状态以及同步的逻辑处理

action：页面修改store需要通过action作为媒介

实例说明：求和

 

1.constant.js

/*
    作用：便于管理，防止程序员单词写错
*/
export const JIA = 'jia'   //加
export const JIAN = 'jian'    //减
export const ASYNC = "async"   //异步加

2.actions/count.js

import {JIA,JIAN,ASYNC} from "../constant"

// 同步action:返回的是object
export const jia = data => ({type:JIA,data})
export const jian = data => ({type:JIAN,data})
export const Async = data => ({type:ASYNC,data})

// 异步action:返回的是func
export const AsyncAction = (data,time) => {
    return (dispatch) => {
        //这里也可以写异步请求
        setTimeout(() => {
            // 调用同步action
            dispatch(Async(data))
        },time)
    }
}

3. reducer/count.js

import {JIA,ASYNC,JIAN} from "../constant"
/*
    1.该文件是用于创建一个为Count服务的reducer,reducer本质就是一个函数
    2.reducer函数会接到两个参数，
*/ 

// 初始化状态
const count = 0
export default function countAdd(preState = count,action){
    // 从action对象中获取：type,data
    // preState是旧数据，data是传进来的新数据
    const {type,data} = action
    switch (type) {
        case JIA:
            return data + 1
        
        case JIAN:
            return data -1
        
        case ASYNC:
            return data + 2
    
        default:
            return preState
    }
}

4.reducer/index.js

/*
    该文件用于汇总所有的reducer
*/ 
import {combineReducers} from "redux"
// 引入Count组件服务的reducer
import count from "./count"

const allReducer = combineReducers({
    count
})

export default allReducer

5.store.js

 // 该文件专门用于暴露一个store对象，整个应用只有一个store对象
 
// 引入createStore，用于创建redux中最为核心的store对象
import {createStore,applyMiddleware} from "redux"
// 引入汇总之后的reducer
import allReducer from "./reducer/index"
// 引入redux-thunk,用于异步action
import thunk from "redux-thunk"
import {composeWithDevTools} from "redux-devtools-extension"

// 暴露store
export default createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))

 6.src/index.js

7.页面使用

import React, { PureComponent } from "react";
import {jia,jian,AsyncAction} from "../../redux/actions/count"
import {connect} from "react-redux"

class Count extends PureComponent {
  render() {
    return (
      <div className="parent">
        <h4>当前求和为：{this.props.count}</h4>
        <button onClick={this.add}>++</button>
        <button onClick={this.jian}>--</button>
        <button onClick={this.asyncClick}>异步++</button>
      </div>
    );
  }
  add = () => {
    let number = this.props.count
    this.props.jia(number)
  }

  jian = () => {
    this.props.jian(this.props.count)
  }

  asyncClick = () => {
    let number = this.props.count
    this.props.AsyncAction(number,1000)
  }
}

export default connect(
  state =>({
    count:state.count, //state.变量名是在reducer/count文件中声明的变量
  }),{
    jia,
    jian,
    AsyncAction
  }
)(Count)  //上面class的类名

实例说明：添加人

1.constant.js

export const ADD_PERSON = 'person'  //添加人

2.reducer/person.js

import { ADD_PERSON } from "../constant";
// 初始化状态
const person = [
    {
        name:'lxy',
        age:18
    }
]
export default function personReducer(preState = person,action){
    const {type,data} = action
    switch (type) {
        case ADD_PERSON:
            
            return [data,...person]
    
        default:
            return preState
    }
}

3.reducer/index.js

/*
    该文件用于汇总所有的reducer
*/ 
import {combineReducers} from "redux"
//引入person组件服务reducer
import person from "./person"

const allReducer = combineReducers({
    person
})

export default allReducer

 4.actions/person.js

import { ADD_PERSON } from "../constant";

export const Rens = data => ({type:ADD_PERSON,data})

5.页面使用

import React, { Component } from "react";
import { connect } from "react-redux";
import { Rens } from "../../redux/actions/person";

class Person extends Component {
  render() {
    return (
      <div>
        <div>Person组件</div>
        <input ref="name" type="text" placeholder="姓名" />
        <input ref="age" type="text" placeholder="年龄" />
        <button onClick={this.add}>添加</button>
        {this.props.personArr.map((item) => {
          return <li key={item.name}>name:{item.name},age:{item.age}</li>;
        })}
      </div>
    );
  }

  add = () => {
    const obj = {
      name: this.refs.name.value,
      age: this.refs.age.value,
    };
    this.props.Rens(obj)
  };
}

export default connect(
  (state) => ({
    personArr: state.person,
    count: state.count,
  }),
  {
    Rens,
  }
)(Person);