关于redux

关于redux

redux thunk —异步的中间件

react-redux —用来处理显示组件和容器组件的关系

redux----没有集成在react中，而是需要我们引入的包 第3方库

几个基本的概念：

1. store----存储数据的仓库

   创建store

   import {createStore} from 'redux'

   const store=createStore(reducer)

2. state —数据仓库对应的具体的数据

   获取当前store所对应的快照（通过下边这种方式查看store中对应state的当前状态）

   store.getState()

3. action 对象—用来描述当前我们是如何操作state状态的

   //一个action
   const action={
   
   	//type字段用来描述你要执行的动作
   	type：'ADD_ONE',
   	
   	//当前的负载num=1
   	num:1
   }
   

4. dispatch 唯一能够更改state的唯一方法

   store.dispatch(action)

   根据action更新当前的store

5. reducer 函数：用来返回一个新的state，（更新当前的state的一个中转）

   //两个参数 初始值和action
   const reduer=(state=10,action)=>{
   	switch(action.type){
   		case 'ADD_ONE':
   			return state +action.num
   		case 'ADD_TWO':
   			return state +action.num
   		default：
   			return state;
   	}
   }
   

   更新state，用action更新，借助reducer函数作为中转

   几个action对应几个操作

//写一个完整的小demo------demo看懂你就会啦~~

//定义两个action
const addONE={
   type:'ADD',
   num:1
}

const add={
//平方
   type:'SQUARE'
}

//借助reducer作为中转修改state
const reducer=(state=10,action)=>{
   switch(action.type){
   	case'ADD':
   		return state+action.num
   	case'SQUARE':
   		return state*state
   	default:
   		return state
   }
}
//创建store  把reducer作为参数
const store= createStore(reducer)

//查看state的状态  
console.log(store.getState());//10  
//如果reducer中没有设置默认值  输出为undefined

此时没有传入任何dispatch的操作，(dispatch是唯一更改state的方式)—因此输出初始值10
getState做了什么？ 去reducer里去找对应的state

//传入一个action参数，根据不同的action去处理每一次返回之后的action状态
store.dispatch(addONE)
console.log(store.dispatch(addONE)）---这里返回的是一个完整的action

接下来再次获取当前的state
console.log(store.getState());//11

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f1kiJq9d-1658234010892)(E:\vscode_workspace\typora笔记\笔记图片\1658149566703.png)]

在项目中提取action&提取reduce,

src—>新建constans/ActionTypes.js 放置action字段–常量

const ADD='ADD'
const SQUARE='SQUARE'
export {
	ADD,
	SQUARE
}

src—>新建actions/actions.js

import {ADD,SQUARE} from '../constans/ActionTypes'
/* const addONE={
	type:ADD,
	num:1
}
const add={
	type:SQUARE
}
export {
	addONE,
	add
} */
*****************************************************************************************
//Action创建函数----通过方法创建action
const addAction=(num)=>{
	return {
		type:ADD,
		num
	}
}
const squareAction=()=>{
	return {
		type:SQUARE,
		
	}
}
export{
	addAction,
	squareAction
}

src—>reducer/math.js

const math=(state=10,action)=>{
	switch(action.type){
		case'ADD':
			return state+action.num
		case'SQUARE':
			return state*state
		default:
			return state
	}
}
export default math

src—>index.js

import React from 'react';
import ReactDom from 'react-dom'
import store from './store/store'

import { Provider } from 'react-redux'
import Container from './Components/Container'

function APP(){
	return (
		<Provider store={store}>
			<Container/>
		</Provider>
	)
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xWOpZnQI-1658234010894)(E:\vscode_workspace\typora笔记\笔记图片\1658212078599.png)]

react-redux&connect —实现页面响应

1. 安装

   npm i react-redux

2. react-redux将所有的组件分为展示组件和容器组件

   import { Provider } from 'react-redux'
   

   src–>Components/Container.js

   import React from 'react'
   import {connect} from 'react-redux'
   import {addAction,squareAction} from  '../actions/actions.js'
   function Container(props){
   	const {num,add,aquare}=props
   	return(
   		<div>
   			<p>{num}</p>
   			<button onclick={()=>{add(1)}><加1/button>
   			<button onclick={()=>{squareAction(2)}>乘方</button>
   		</div>
   	)
   }
   //
   const mapStateToProps=(state)=>{
   	return{
   		num:state
   	}
   }
   
   const mapDispatchToProps=(dispatch)=>{
   	return{
   		add:(value)=>dispatch(addAction(value)),
   		aquare:()=>dispatch(squareAction())
   	}
   }
   export default connect(mapStateToProps,mapDispatchToProps)Container
   

   redux-thunk --处理

   src—>store/store.js

   import math from '../reducers/math'import math from '../reducers/math'
   import thunk from 'redux-thunk'
   import {createStore,applyMiddleware} from 'redux'
   
   const store=createStore(math,applyMiddleware(thunk))
   
   export default store;


rt math from '../reducers/math'import math from '../reducers/math'
   import thunk from 'redux-thunk'
   import {createStore,applyMiddleware} from 'redux'
   
   const store=createStore(math,applyMiddleware(thunk))
   
   export default store;