博客

1.Redux基本介绍

Redux:是js应用的状态容器,提供可预测的状态管理.将Flux和函数式编程reducer结合在一起.另外的状态管理器还有Mobx.

redux中文文档

2.问题导入:多组件共享数据

a.redux可以无视组件层级;

b.对于组件来说,redux就是一个第三方的全局的变量.

Redux三个核心概念

(1)三个核心概念

核心概念:

store


action


reducer


action

动作,一个js对象,包含两个属性:(action只是表示

有事情要做,

但是他不做具体的事)

a. type:标识属性,值为字符串,多个type用action分开;

b. payload:数据属性,可选,表示本次动作携带的数据.

reducer

一个函数,作用:a.

初始化状态

; b.

修改状态

;

修改状态:根据传入的旧状态和action,返回新状态.

公式:

(previousState,action)=>newState


store

store:仓库,Redux的核心,整合action和reducer.

特点:a.

一个应用只有一个store

; b:维护应用的状态,获取状态:

store.getState()

;

c.创建store时

接收rducer为参数:const store=createStore(reducer)

;

d:发起状态更新时,需要分发action:

store.dispatch(action)


其他API: a.订阅/监听状态变化:

const unSubscribe=store.subscribe(()=>{})

;

b.取消订阅状态变化:

unSubscribe()


Redux功能演示核心代码

安装redux,

npm i redux


(1)acton的实例代码

//action

const action1 = { type: ‘add1’ },

const action2 = { type: ‘addN’, payload: 12 },

const action3 = { type: ‘addN’, payload: 10 },

(2) reducer的实例代码

//reducer

const initState = 0//初始state

const reducer = (preState = initState, action) => {


// if (action.type===’add1′) {


//     return preState+1

// } else if (action.type===’addN’) {


//     return preState+action.payload

// } else {


//     return preState

// }

switch (action.type) {


case ‘add1’:

return preState + 1

case ‘addN’:

return preState + action.payload

default:

return preState

}

}

store的实例代码

//创建store

import { createStore } from ‘redux’

const store = createStore(reducer)

//1.获取状态

console.log(store.getState());

//2.更新状态

//a. dispatch,分发一个action,也就是发起状态更新;

//b: store.dispatch会调用reducer函数,并将action传给reducer

store.dispatch(store.getState())

//3.添加订阅者

store.subscribe(() => {


//状态改变时,执行相应操作

console.log(‘数据变化了…’);

})

store.dispatch(action1)

store.dispatch(action2)

React-redux基本介绍

(1)react中直接使用redux有很多不便的地方

1.每个组件都要引入store

2.在根组件的写法不友好

store.subscribe(() => {


console.log(‘数据改变了’);

ReactDOM.render( <App />,document.getElementById(‘root’) )

})

ReactDOM.render(  <App />,document.getElementById(‘root’))

react-redux库

是React官方提供的React绑定库

作用:为React接入Redux,实现在React中使用Redux进行状态管理.

react-redux基本使用

1.安装:

`npm i redux


npm i react-redux

,都要安装

2.a.使用:按redux的要求,创建好store,reducer,action等;

b:从react-redux中引入provider,useSelector,useDispatch来操作redux.

内容

Provider

用法:直接包在根组件上,

<Provider store={store}>

,组件不需要都再单独引入store了.

import {Provider } from ‘react-redux’

import store from ‘./store’;

ReactDOM.render(

<Provider store={store}>

<App />

</Provider>, document.getElementById(‘root’))

useSelector

用法:获取公共状态;

好处:相比react+redux,不需要使用store.getState()了;state变化了,他会自动更新;

useDispatch:修改数据

import React from ‘react’

import { useDispatch ,useSelector} from ‘react-redux’

export default function Uncle() {


//修改数据

const dispatch = useDispatch()

//获取数据,state就是redux的数据

const num = useSelector((state) => {


return state

})

return (

<div style={

{border:’1px solid #ccc’,margin:10,padding:10}}>

Uncle组件:{num}

<button onClick={() => {


dispatch({type:’sub1′})

}}>-1</button>

</div>

)

}

store/index.js

//1.创建store

import { createStore } from ‘redux’

import reducer from ‘./reducer’

const store = createStore(reducer)

export default store

store/reducer.js中

const initState = 0

export default function reducer (state = initState, action) {


console.log(action);

switch (action.type) {


case ‘addN’:

return state+action.payload *1

case ‘sub1’:

return state-1

default:

return state

}

}

Reducer的分离与合并

(1)问题

随着项目功能复杂,需要Redux管理的状态越来越多,导致reducer函数越来越重.

(2)解决思路

拆分:按业务模块拆分,把大的reducer拆成小文件.

//1.创建store

import { createStore } from ‘redux’

import reducer from ‘./reducers/index’//注意此处

const store = createStore(reducer)

export default store