学习经历:
1.先是看<<redux技术栈>>与<<redux深入浅出>>两本书,看不懂
2.看阮一峰博客讲解redux,看不懂
3.看B站 录像Dan Abramov 讲解用redux 做一个todoList,看了大概一段时间,越看越晕
4.看B站 黑马程序员长沙中心 讲解redux跟react-redux,终于搞懂了基本的流程
5.自己写redux的todoList,写的头疼,写到后面还需要用redux-saga和redux-thunk,所以暂时暂停了redux的学习.
6.因为朋友所在的公司都是用mobx的,所以去花半小时的时间看了下mobx.做一个todoList比redux的简单得多
redux的一些总结(原本记在有道云笔记里的):
- Redux内的state不可强行改变
- Object.assign将多个对象的属性赋给目标对象
- 多使用 …扩展运算符
- reducer是一个纯函数,不改变传入的值
- reducer可以调用另一个reducer,抽象出一种方式来处理对它们所管理的状态树的某些部分的更新,简化的方法就是使用combieReducesrs方法
7.
开发流程:
安装依赖
yarn add redux
yarn add react-redux
redux部分
建reducer
export const reducer = (state={value:0},action) =>{
console.log('这里是reducer',action)
switch (action.type) {
case "add_action":
return {value:state.value+1}
default:
return state;
}
}
建store
import {createStore} from "redux";
import {reducer} from '../reducers/index'
export const store = createStore(reducer)
//如果使用combineReducers
import { combineReducers } from 'redux'
export default combineReducers({
reducer1,
reducer2
})
建actions
export const addTodo = (text) => ({
type: 'ADD_TODO',
id: nextTodoId++,
text
})
export const setVisibilityFilter = (filter) => ({
type: 'SET_VISIBILITY_FILTER',
filter
})
export const toggleTodo = (id) => ({
type: 'TOGGLE_TODO',
id
})
react-redux部分
建Provider
<Provider store={store}>
<div className="APP">
<A/>
<B/>
</div>
</Provider>
建connect
export default connect(mapStateToProps, mapDispatchToProps)(A)
mapDispatchToprops,将dispatch作为props的方法传给组件使用
mapStateToprops,获取store里的state
总结:
1.redux是一个很厉害的大神弄出来的很厉害的东西,但是redux的学习成本很高,写起来也累.可能更适合大型的项目使用
2.mobx的学习成本确实比较低,目前新一代的react状态管理库Reacoil也在研发,也听过很多人说redux难,很有可能被淘汰,但是目前react.hooks中的useReducer还是会用到redux,redux的功能也确实比较强大,所以尽管在学习redux上花费了很多时间,但还是有必要的.