React----函数组件通信（React-Redux）
安装react-redux
yarn install --save react-redux
React-Redux版本
index.js-----使用Provider包裹 index.js (入口文件)
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {BrowserRouter} from "react-router-dom";
import store from "./redux/store";
import {Provider} from "react-redux";
ReactDOM.render(
,
document.getElementById('root')
);
redux/store.js
/*
该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/
//引入createStore，专门用于创建redux中最为核心的store对象
import {createStore, applyMiddleware, combineReducers} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './reducers/count'
//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
import personReducer from "./reducers/person";
//引入redux-devtools-extension
import {composeWithDevTools} from 'redux-devtools-extension'
const allReducer = combineReducers({
count:countReducer,
person:personReducer
})
//暴露store
export default createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))
redux/constant.js
/*
该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
redux/reducers/count.js
/*
1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/
import {INCREMENT} from "../constant";
import {DECREMENT} from "../constant";
const initState=0
export default function countReducer(preState=initState,action){
const {type,data}=action
switch (type) {
case INCREMENT:
return preState+data
case DECREMENT:
return preState-data
default:
return preState;
}
}
redux/reducers/person.js
const initState='张三'
export default function personReducer(preState=initState,action) {
const {type,data}=action
console.log('data====',data)
switch (type) {
case 'update':
return data+'#'
default:
return preState;
}
}
redux/actions/count.js
/*
该文件专门为Count组件生成action对象
*/
import {INCREMENT,DECREMENT} from "../constant";
export const createIncrementAction=(data)=>{
return {type:INCREMENT,data}
}
export const createDecrementAction=data=>({type:DECREMENT,data})
export const createIncrementAsyncAction=(data,time)=>{
return (dispatch)=>{
setTimeout(()=>{
dispatch(createIncrementAction(data))
},time)
}
}
redux/actions/person.js
export const updateName = (data) => {
return {type:'update',data}
}
使用
使用useDispatch调用action修改数据
使用useSelector获取数据
未使用connect版本
components/count/index.js
import React, {useRef} from 'react';
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction} from "../../redux/actions/count";
import {useDispatch, useSelector} from "react-redux";
function Count(props) {
const current = useSelector((state) => {
console.log('state==Count==',state)
return state.count
})
const selectNumber=useRef();
const dispatch = useDispatch()
function increment() {
const {value}=selectNumber.current
dispatch(createIncrementAction(value*1))
}
function decrement() {
const {value}=selectNumber.current
dispatch(createDecrementAction(value*1))
}
function incrementIfOdd() {
const {value}=selectNumber.current
if (current%2!==0){
dispatch(createIncrementAction(value*1))
}
}
function incrementAsync() {
const {value}=selectNumber.current
setTimeout(()=>{
dispatch(createIncrementAsyncAction(value*1,500))
},500)
}
return (
当前求和为：{current}
);
}
export default Count;
components/person/index.js
import React from 'react';
import {useDispatch, useSelector} from "react-redux";
import {updateName} from "../../redux/actions/person";
function Person(props) {
const current = useSelector((state) => {
console.log('state==Person==',state)
return state.person
})
const dispatch=useDispatch()
function changeName() {
dispatch(updateName( current))
}
return (
姓名：{current}
);
}
export default Person;
使用connect版本
components/count/index.js
import React, {useRef} from 'react';
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction} from "../../redux/actions/count";
import {connect} from "react-redux";
function Count(props) {
const selectNumber=useRef();
function increment() {
const {value}=selectNumber.current
props.jia(value*1)
}
function decrement() {
const {value}=selectNumber.current
props.jian(value*1)
}
function incrementIfOdd() {
const {value}=selectNumber.current
const {count}=props
if (count%2!==0){
props.jia(value*1)
}
}
function incrementAsync() {
const {value}=selectNumber.current
props.jiaAsync(value*1,500)
}
const {count,person}=props
return (
当前姓名为：{person}
当前求和为：{count}
);
}
/*
1.mapStateToProps函数返回的是一个对象；
2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
3.mapStateToProps用于传递状态
*/
function mapStateToProps(state){
return {count:state.count,person: state.person}
}
/*
1.mapDispatchToProps函数返回的是一个对象；
2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
3.mapDispatchToProps用于传递操作状态的方法
*/
function mapDispatchToProps(dispatch){
return {
jia:number => dispatch(createIncrementAction(number)),
jian:number => dispatch(createDecrementAction(number)),
jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),
}
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps,mapDispatchToProps)(Count)
components/person/index.js
import React from 'react';
import {connect} from "react-redux";
import {updateName} from "../../redux/actions/person";
function Person(props) {
function changeName() {
const {person}=props
props.updateName(person)
}
const {count,person}=props
return (
当前求和为：{count}
姓名：{person}
);
}
function mapStateToProps(state){
return {count:state.count,person:state.person}
}
function mapDispatchToProps(dispatch){
return {
updateName:number => dispatch(updateName(number)),
}
}
export default connect(mapStateToProps,mapDispatchToProps)(Person)