这是我参与「第四届青训营 」笔记创作活动的的第4天
当我们在利用react脚手架写项目时，如果有多个组件以及他们之间需要进行数据交流时，可以利用react-redux对众多的组件进行管理，并且利用redux的特性可以使组件之间进行数据交流更加方便。在此，记录初识redux的理解以及对于redux的使用
redux的基本使用
- 引入redux
:npm install redux - 在src文件夹下建立redux文件夹，用于存储redux文件
redux文件介绍
redux主要有三个文件，分别是：store.js, reduce.js, action.js
store.js
该文件主要用于暴露组件，且整个应用只有一个store对象
// 引入createStore用于创建store
import { legacy_createStore as createStore } from 'redux'
// 引入为Count组件服务的reducer
import countReducer from './count_reducer'
// 默认暴露一个容器
export default createStore(countReducer)
reduce.js
- 文件是用于创建一个为Count组件服务的reducer，reducer的本质是一个函数
- reducer函数会接到两个参数，分别为：之前的状态,动作对象
// 初始状态可以由自己进行定义，而动作方法是由组件进行传入
// 一般动作方法包括两个参数：动作，传入的数据
export default function countReducer(初始状态,动作方法){}
action.js
该文件主要用于为组件生成方法--可以直接定义在组件里面(当方法不多时)，此处返回的是动作及数据，与上方的reducer相对应
export const createDecrement = data => ({ type: 'decrement', data })
在组件中获取存贮在redux中的API
在组件中引入store:import store from '../../redux/store.js'
- store.getState() 得到reduce里面返回的值 --可以命名任意一个变量接受
- store.dispatch({})给reduce传递参数，并且调用该函数
- store.subscribe()检测reduce中返回的值是否发生改变，改变则调用一次
异步action
上面配置的store.js文件中暴露的组件中的动作均为同步动作，若有异步动作（定时器，请求数据）等有延迟的行为时，需要重新配置store.js
- 引入redux-thunk
：npm i redux-thunk - 创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务(同步的返回值为一般对象)
- 异步任务有结果后，分发一个同步的action去真正操作数据(例子中为createIncrement())
- 异步action不是必须要写的，一般都可以在组件中消除掉
- store.js修改：
// 引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
// 创建store对象，需要多传入一个对象
export default createStore(countReducer, applyMiddleware(thunk))
注：不需要引入store，因为action是被store调用的，所以可以直接使用dispatch
// 同步任务
export const createIncrement = data => ({ type: 'increment', data })
// 异步任务
export const createIncrementAsync = (data, time) => {
f = true
return () => {
setTimeout(() => {
if (f) {
store.dispatch(createIncrement(data * 1))
f = false
}
}, time)
}
}
今天为大家讲述了最基本的redux的使用，当然，由于作者本身水平有限，redux的使用有很多，在此不能一一讲述，本篇文章仅作为入门，还望大家去积极学习更多的内容。下篇会更新更多有关redux的内容！！！
