react_结合 redux

Redux 独立的集中式状态管理 js 库

不是 react 库，可以与 angular、vue 配合使用，通常和 react 用

yarn add redux

import {createStore} from "redux"

const store = createStore(myCounter);? ? // 1. 核心 API - 参数是 reducer 函数---> 根据现有的状态及?action 返回一个新的状态，给 store 管理

import {INCREMENT,DECREMENT} from "./action-types"? ? // 有几个 case，就要定义几个 action 工厂

export default function myCounter(state=0,action){? ? // 由 store 内部调用,初始值为 0?./redux/reducers

switch(action.type){? ? // action 一定要有一个 type 属性

case INCREMENT:{return state+action.numbe;brack;}

case INCREMENT:{return state+action.numbe;brack;}

default: return state

}

}

<App store={store}

?

import {INCREMENT,DECREMENT} from "./action-types"

export const INCREMENT = "increment";

export const DECREMENT = "decrement";

import * as actions from "../redux/actions";

this.props.store.dispatch(actions.increment(number));? ? // action creator 产生一个 action 对象，然后 dispatch 这个行为 action

// 虽然等同于 this.props.store.dispatch({type: INCREMENT,number}); 但是一般不这么做

// 工厂函数 - 每次调用，返回一个新的对象 - 每次都返回一个 actions

this.props.store.getState();

• const store = createStore(myReducer)? ? // 根据 n 个现有需要管理的 state 和 action 返回一个新的 state，给 store 集中管理
• 最核心的 管理对象 store ---- 与 react 的交互就是 读 和 更新

存储状态数据的对象

维护着 state 和 reducer

核心方法

• 获取状态 store.getState()? ? ? ??
• 更新状态 store.dispatch(action)? ?

对象 action

• 必须有 type 标识属性，值为字符串
• 可选数据属性，值为任意类型
• 订阅一个监听函数 subscribe(listener)

什么时候用 redux？

某个组件的状态需要共享

一个组件需要改变全局状态

一个组件需要改变另一个组件的状态

总体原则： 能不用就不用，如果不用比较吃力才考虑使用

不用 redux 时的集中状态管理？

将多个组件的共用状态放在共同的父组件中

将状态的相关方法定义在与状态相同的组件中

官方实例分析？

redux 编程：

---------------------------------------------------------------------------------------------------------

src/redux/store.js

import {createStore} from "redux"

import reducer from "./reducer"

export default creareStore(reducer);? ? // 创建 store 对象，内部会第一次自调用 reducer 函数得到一个初始的状态值进行保存

src/redux/reducer.js

import {INCREMENT,DECREMENT} form "./action-types"

export default? function count(state=1 action){? ? // 管理 count 就可以叫 count，state 本身就是要管理的数据，第一次展示显示 1

switch(action.type){

case INCREMENT:{return state+action.number;}

case INCREMENT:{return state-action.number;}

default: return state;? ? // 不做任何处理

}

}

src/redux/actions.js? ? // 包含 n 个 action-creator 函数

export const increate = (number)=>({type: INCREMENT,number});

export const decreate = (number)=>({type: DECREMENT,number});

src/redux/action-types.js? ? // 多个 js 共用

export const INCREMENT = "increment";

export const DECREMENT = "decrement";

src/index.js

import React from "react"

import ReactDOM from "react-dom"

import App from "./App.jsx"

import store from "./redux/store"

ReactDOM.render(<App store={store} />,document.getElementById("root"));

store.subscribe(()=>{

ReactDOM.ummountComponentAtNode(document.getElementById("root"));? ? // 先卸载原来的组件

})

src/App.jsx

import React,{PureComponent} from "react"

import * as actions from "./redux/actions"

export default class App extends PureComponent{

increment = ()=>{

const number = +this.refs.numberSelect.value;

this.props.store,dispatch(actions.increment(number));

}

decrement = ()=>{

render(){

const count = this.props.store.getState();

}

问题： react 与 redux 耦合度太强了，直接使用了 store

解决： 使用 react 的插件库 react-redux ---- 简化 react 中使用 redux

----------------------------------------- react 与 redux 的连接库--------------------------------------------

Provider

让所有组件都可以 得到/更新 state 数据 ---- 实际是提供了 store

src/index.js

import React from "react"

import ReactDOM from "react-dom"

import App from "./App.jsx"

import store from "./redux/store"

import {Provider} from "react-redux"

-------------------------------------------------------------------------------------------------------------------

src/App.jsx

import {connect} from ‘react-redux‘

imoprt Counter from "./components/Counter"

imoprt {increment,decrement]} from "./redux/actions"

function?mapStateToProps(state){? ? // 读取 state 数据，并将其映射成 UI 组件的一般属性

return {count: state}

function?mapDispatchToProps(dispatch){? ? // 为 UI 组件映射函数属性，函数内部必须 dispatch，分发 action，产生新的 state，重新 render

return {

incremrnt: number=>dispatch(increment(number))

decremrnt: number=>dispatch(decrement(number))

}

?

export default connect(

mapStateToProps,? ? // 用来确定向 UI 组件传递哪一些一般属性 count

mapDispatchToProps? ? // 用来确定向 UI 组件传递哪些函数属性 increment、decrement

)(Counter)? ? ? ? // 用 connect 函数包装一下 App 组件，返回一个新的组件对象

src/components/Counter.jsx

1

react-redux 将组件分为

UI 组件

不会使用任何 redux 相关的语法

最终，值还是要被 store 管理的 ，getState()、dispatch()、

5

55

5