redux -- reducer -- 划分

redux – reducer – 划分

  1. 分析
    一个项目:

    • banenr
    • home
    • mine
    • login
    • register
    • detail
    • shopcar
    • 会员
    • 普通用户数据
  2. 解决: 希望的一个类型数据一个模块 ---- 》 reducer划分 combineReducers

  3. 分析: 我们希望我们的store下面每一个文件夹就是一个 类型 的数据包

  4. 解决: redux combineReducers
    每一个数据包的目录结构

    • store
      • home
        • state.js
        • type.js
        • reducer.js
        • actionCreator.js
        • 我们需要一个统一的redcuer的管理者
          /* 
              这里的reducer才是真正的统一管理者
          */
          import {combineReducers} from 'redux'
          import todolist from './todolist/reducer'
    
          const reducer = combineReducers({
              todolist
          })
    
          export default reducer 
    
    

    使用的时候

    store.getState().todolist.todos

redux – react-thunk – 实现异步请求和辅助发送action

  1. 问题: 我们在更新视图时,在组件中每次都要进行 store 的订阅,代码是冗余的
  2. 问题: 我们在触发actionCreators中的方法时,触发形式的书写也很相似
  3. 问题: 后端数据交互往哪里写? actionCreators中写,actionCreators不是用来创建动作的么?

所以,我们引入了 react-redux 工具来处理这些问题

综上: 我们通过 几个工具来解决

Provider bindActionCreators

react-redux只是一个辅助工具,只是将react和redux进行更好的连接的桥梁工具

核心概念

容器组件(智能组件)、UI组件(木偶组件) 非受控组件 ref受控组件

react-redux觉得如果一个组件想要使用到store中的数据或者是actionCreator的方法,我们都应该将其变化为容器组件包裹UI组件的样子

其中,容器组件负责连接store,将状态、方法传递给UI组件,UI组件从属性上取得这些api后进行使用

而且,不需要担心是容器组件可以根据UI组件来生成

核心API

Provider 、 connect(mapStateToProps,mapDistpatchToProps)

Provider负责将store相关的api,传入到内部所有的容器组件中

connect负责根据UI组件来生成容器组件

使用方法与细节

  1. 需要安装react-redux工具

  2. 需要在组件的最外层套上Provider组件,并为其传入store

  3. 利用connect将需要使用store相关api的组件变成容器组件嵌套UI组件的模式

    connect方法的返回值是一个函数,这个函数接收到UI组件之后会返回一个容器组件,容器内部已经嵌套了UI组件

    Provider组件会利用context上下文将自己属性中store传递给自己的子级组件,而容器组件会取得context上面的store相关的api

    我们可以在connect函数中传入mapStateToProps/mapDispatchToProps参数来掌控容器组件给UI组件传递属性的过程

    mapStateToProps的作用:

    将store中的state传递到UI组件的属性上
    值为一个函数,接收到的就是store中的state(他自己定死的就是store中的state)
    返回值是什么,UI组件的属性上就有什么
    并且,因为容器组件中已经做好了store.subscribe的处理,所以一旦store中的状态变化,容器组件就马上能得知,就会重新给UI组件传入新的数据

    问题: 坑  ? 我们的store中的数据在更新, 但是里面的容器组件中的 props 不更新

    分析: 先从组件上着手,查看我们书写的代码, 发现代码没有问题的, 这个时候我们就要去查看数据来源, 而数据来源来自于  reducer , 然后输出一下数据, 发现数据渲染了三次 , 有两次是一个组件在创建的时候, 数据从无到有, 还有一次是容器组件产生的 , 后面我们发送我们的new_state一直在重复初始化, 

    解决方案: 
        let new_state = {...previousState}

mapDispatchToProps的作用:

可以将能使用到dispatch的一些方法传递到UI组件上
值为一个函数,接收到的就是store中的dispatch
返回什么,UI组件的属性上就有什么
这个时候actionCreator就变得很纯粹,只需要创建action,dispatch action的动作可以放到mapDispatchToProps的方法中,也就说,在mapDispatchToProps给UI组件传递的函数中将actionCreator创造好的action给dispatch走

但是这样的写法优点不舒服,因为actionCreator里有一个方法,还需要在mapDispatchToProps里再写一个方法

所以可以利用redux中的bindActionCreators将actionCreator中的方法直接放入到UI组件中并且将其返回的action给直接dispatch走
因为在组件中既要用到store中的状态,也要用到actionCreator的方法,导致这个组件引入了很多东西,其实我们可以将这些逻辑封装取出

group-todolist.js:

import actionCreator from '../store/todolist/actionCreator'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

let GroupTodolist = connect(state => state.todolist, dispatch => {
    return bindActionCreators(actionCreator, dispatch)
})

export default GroupTodolist

TodoContent:

import GroupTodolist from '../../modules/group-todolist'

....

export default GroupTodolist(TodoContent)

redux-thunk 工具

我们上面的使用方法很简单,也很舒服

但是有一点小问题,如果我们有了异步操作,比如我们会先执行一个ajax调用之后再去更改状态的话,这个异步动作,没有地方放了

  1. 我们不能把异步动作放到组件中,因为UI组件只负责使用数据,如果有其他的异步代码,让UI组件组件不纯粹
  2. 理论上来说放到actionCreator的方法中最合适,但是,因为actionCreator目前只是专注于创建action和返回action,无法放入异步操作

所以,我们需要用到redux的中间件工具:redux-thunk、redux-promise、redux-saga… (面试题)

在这里我们研究一下redux-thunk

它的使用方法及其简单:

  1. 安装redux-thunk

  2. 在创建store的时候使用中间件

    import { createStore, applyMiddleware } from ‘redux’

    import thunk from ‘redux-thunk’

    import reducer from ‘./reducer’

    const store = createStore(reducer, applyMiddleware(thunk) )

  3. 这个时候,actionCreator的方法就可以返回一个能接收到dispatch的一个函数,我们可以在这个函数中进行异步操作之后,将actionCreator创建好的action给发送

你可能感兴趣的:(React)