react之redux初体验

最新推荐文章于 2024-04-30 15:07:55 发布

deeply5

最新推荐文章于 2024-04-30 15:07:55 发布

阅读量117

点赞数

文章标签： react

本文链接：https://blog.csdn.net/deeply5/article/details/105781668

版权

react之redux

redux中文文档

什么是redux？

redux： Redux 是 JavaScript 状态容器，提供可预测化的状态管理。
redux思想：

（1）Web 应用是一个状态机，视图与状态是一一对应的。

（2）所有的状态，保存在一个对象里面。
1. redux的适用场景：
- 用户的使用方式复杂
- 不同身份的用户有不同的使用方式（比如普通用户和管理员）
- 多个用户之间可以协作
- 与服务器大量交互，或者使用了WebSocket
- View要从多个来源获取数据
上面这些情况才是 Redux 的适用场景：多交互、多数据源

从组件角度看，如果你的应用有以下场景，可以考虑使用 Redux
- 某个组件的状态，需要共享
- 某个状态需要在任何地方都可以拿到
- 一个组件需要改变全局状态
- 一个组件需要改变另一个组件的状态

redux工作流程图

redux的使用

安装稳定版
```
npm install redux -S
```
特别注意：应用中的state都已一个对象树的的形式存储在一个单一的store中，唯一改变state的办法是触发action，一个描述发生什么的对象。为了描述action是如何改变state树的过程的，我们需要编写reducers。

简单讲就是在项目中有且只能有一个store，所有的state也就是state对象树存储在这个store里。

action是描述了对state做了怎样的操作，操作的过程在reducers里。
- 首先需要创建应用的唯一store
```
import { createStore } from 'redux';
import reducer from './reducer'
const store = createStroe(reducer)
export default store
```
  这样一个简单的store就创建完成了。
- 第二步创建reducer文件并如上代码所示，将reducer文件引入，才能将单一store创建成功
  - reducer是一个纯函数，不能在reducer中做不纯粹的操作，不能有异步函数，里面的操作必须是同步的。
  - 形象的理解的话类似于vue中的Mutations
  - 创建reducer文件时需将state文件引入
```
import state from './state'
const reducer = (previousState = state,action)=>{
	//因为reducer是纯函数，所以我们不能对初始的state也就是previousState进行不纯粹的操作，所以我们需要将其解构出来。
	let newState = {...previousState}
	switch(action.type){
		case action.type的具体名字:
		需要进行的操作
		break;
		default:
		break;
}
	return newState
}
export default reducer
```
- 第三步，在组件中分别引入store、actionCreators文件，
  - actionCreators文件就是我们对state进行改变的action集合
    
    其中actionCreators和action的关系就是actonCreators创建了很多action，在该文件中引入store文件，在创建好action后，通过store.dispatch(action)将action派发给对应的reducer。特别需要注意action有一个type属性，以供reducer识别具体的操作动作
  - 具体操作如下
    
    我这是建立在单一的reducer文件并将有关redux建立的文件都放在了store文件夹中。如果需要多个reducer，则需要在store文件夹中的根reducer中引入combineReducers,然后将各个reducer的分支进行合并
```
import store from './index'
export default {
	方法名(需要在组件中传入的参数){
	//action 是一个对象
	let action = {
		type:"action的类型，主要是以供reducer进行识别"	
		需要在组件中传入的参数，
		
}
	}
}
```
    如果在action中直接以字符串的命名的话，如果书写有误的情况下，终端和页面是不会报任何错误的，reducer会将action中的type和reducer中case中的type进行比对，如果没有识别，会直接返回没有进行更改的newState,也就是不会对state进行任何更改。
    
    为了防止出现以上情况，我们可以创建一个actionType文件，将type的名字变成从actionType中解构出来的变量
    
    actionTypes文件
```
export const type名字 = "type名字"
```
    actionCreators文件
```
import store from './index'
import {type名字} from './actionTypes'
export default {
	方法名(需要在组件中传入的参数){
	//action 是一个对象
	let action = {
		type:type名字
		需要在组件中传入的参数，
		
}
	}
}
```
- 第四步，在一切需要的redux文件创建好之后，将store文件，actionCreators文件分别引入组件内。
  - 定义类组件的初始state，并通过store.getState()获取所需的属性值。
  - 对组件内某个节点操作需要创建对应的方法并将参数传入，然后调用actionCreators.需要使用的对应的创建action
  - 在componentDidMount(){
```
store.subscribe(()=>{

		this.setState({

	//this.state中需要改变的属性比如a

			a:store.getState().a

})

})

}
```
做完以上操作就完成了一个最基本的redux的相关操作，需要注意的点有以下几个
- 安装redux之后通过createStore方法来创建store，createStore()的参数reducer
- reducer是一个纯函数，只能做同步操作，不能在reducer内做不纯粹操作
- state的创建，state是一个对象树
- actionCreators文件是一个创建了多个所需action的文件，需要引入store文件，并使用store.dispatch(action)才能将我们需要的action给reducer派发
- 在组件内需要使用函数的形式将我们需要传入的参数通过调用actionCreators中的具体对应的动作
- 在reducer更改完newState并返回新的newState后需要在组件内调用store.subscribe()对reducer进行订阅，从而达到视图与状态的一一对应，视图的实时更新