整理下Redux的学习经历与反思

学习经历:

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的一些总结(原本记在有道云笔记里的):

1. Redux内的state不可强行改变
2. Object.assign将多个对象的属性赋给目标对象
3. 多使用 …扩展运算符
4. reducer是一个纯函数,不改变传入的值
5. reducer可以调用另一个reducer,抽象出一种方式来处理对它们所管理的状态树的某些部分的更新,简化的方法就是使用combieReducesrs方法
6. 
   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上花费了很多时间,但还是有必要的.