redux要点
- redux基础
- redux中数据的划分( reducer 划分)
- redux中的中间件
组成部分
- store 数据的管理者
- view react的组件来充当
- actionsCreators 动作的创建者, 用来发送一个 action ❥(^_-)
- reducer 动作的触发者, 用来修改数据的 ,reducer是一个纯函数,它里面有一个返回值, 返回值是什么, 那么newState就是什么
redux的基础使用流程 吉德林法则
得有一个工具 redux
- 安装 redux
yarn add redux
-
创建一个共享的数据存储仓库 文件夹 store
src
store
index.js -
store的创建
import { createStore } from ‘redux’
const store = createStore(reducer)
export default store
-
创建reducer.js 纯函数
/* reducer 是一个纯函数 ,函数接收两个参数,第一个参数是 previousState, 第二个参数是 action previousState = state 赋初始值时,会将地址浅拷贝给previousState,当previousState改变时, 会影响state, 我们应该避免这种情况,所以我们要做一个深拷贝,我们使用最简单的形式就是:解构赋值 那么我们就可以直接去管newState */ import state from './state' import * as type from './type' const reducer = ( previousState = state, action ) => { var newState = { ...previousState } switch ( action.type ) { case type.ADD_TODOS: //修改数据的 newState.todos.push({ id: newState.todos.length + 1, text: action.payload }) break; default: break; } console.log( newState ) return newState } // module.exports = reducer export default reducer
-
初始化状态
创建 state.js
const state = {
todos: [
{},{}
]
}
import state from './state'
const reducer = (previousState = state,action) => {
let new_state = previousState
return new_state
}
- reducer要将数据 给 store
import reducer from './reducer'
const store = createStore(reducer)
-
store —> view
view
import store from ‘./store’store.getState() 就可以拿到数据了 写无状态组件 写列表渲染函数 key要加
-
view 用户操作 — 》 actionCreators
创建 actionCreators.js
import store from ‘./index’
let actionCreators = {
//方法
fn(){
// 1. 创建 action
let action = {
type: 常量,
payload
}
// 2. 发送 action
store.dispatch(action)
}
}
export default actionCreators
-
reducer 接收 actionCreator 发来的 action
const reducer = (previousState = state ,action) => {
let new_state = previousState
switch (action.type) {
case type.xxx:
// 数据的修改
break;default: break; } return new_state
}
-
视图的更新 —》 重新获取数据
componentWillMount(){
store.subscribe(()=>{
this.setState({
todos: store.getState().todos
})
})
}
redux进阶使用流程
reducer划分
分析
一个项目:
banenr
home
mine
login
register
detail
shopcar
会员
普通用户数据
解决: 希望的一个类型数据一个模块 ---- 》 reducer划分 combineReducers
分析: 我们希望我们的store下面每一个文件夹就是一个 类型 的数据包
解决: 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