Redux的工作流程

2023-02-12 11:40:09

1.Redux 是一个专门用来管理数据业务或逻辑状态的框架，它也可以实现代码结构的规范化并提供组件之间通信的便利，而这两点，对于大型应用来说非常关键。

2.工作流程：

Redux 三大原则

单一数据源整个应用的 state 被存储在一个 Object tree 中，且只存在于唯一的Store中。
state 是只读的唯一改变 state 的方法就是触发 action，action 是一个用于描述发生事件的普通对象，视图部分只需要表达想要修改的意图，所有修改都会被集中化处理。
使用纯函数来执行修改为了实现根据 action 修改 state值，我们就需要编写 Reducer。它是一个纯函数，接收先前的 state 和 action 返回新的 state ,随着应用的变大，你可以将它拆成多个小的 Reducer ,分别独立操作 state tree 中的不同部分。

2.具体工作步骤

Action

const add =()=>{

	return {

		type:"add",

		data:id,

	}

}

上边函数返回的就是一个 Action,它是一个包含 type 和 data 的对象。 Action 的作用就是告诉状态管理器需要做什么样的操作，正如上边的例子，就是要添加一条信息，这样就定义了一个Action，而 data 就是你做这个操作需要的数据。

Reducer

reducer 是一个函数(纯函数)，接受旧 state 和 action，根据不同的 Action 做出不同的操作并返回新的 state 。即：(state, action) => state

const reducer = (state,action)=>{

	switch(action.type){

		case "add":

			state['newItemId'] = action.data;

			return {...state};

		case "delete":

			delete state.newItemId;

			return {...state};

		default :

			return state;

	}

}

在没有任何操作的情况下，我们返回的 state 与原 state 相同。

Store

import { createStore } from 'redux';

const store = createStore(reducer);

这就是 store，用来管理 state 的单一对象，其中有三个方法：

store.getState():获取state ,如上,经过 reducer 返回了一个新的 state,可以用该函数获取。
store.dispatch(action):发出 action,用于触发 reducer 更新 state,
store.subscribe(listener):监听变化，当 state 发生变化时，就可以在这个函数的回调中监听。

React-Redux

Redux 官方提供的 React 绑定库。

容器组件与傻瓜组件

在应用中，通常容器组件对于 Redux 可知,他们的子组件应该是"傻瓜的"(傻瓜组件)，并且通过porps获取数据。容器组件: 通过组件 state 属性维护自身及其子组件的数据，它可以向 Redux 发起 action ,从 Redux 获取新state值。傻瓜组件: 通过 props 调用回调函数，从 props 获取数据展示。

注入 Store

import React from 'react';

import ReactDOM from 'react-dom';

import { createStore } from 'redux';

import { Provide } from 'react-redux';

import reducer from './reducer';

import App from './app';

const store = createStore(reducer);

class RootComp extends React.Component{

	render(){

		//...

		return (//将整个视图结构包进 Provider

			<Provider store={store}>

				<App/>

			</Provider>

		)

	}

}

ReactDOM.render(<RootComp/> ,document.getElementById('root'));

connect#

该方法用于从 UI 组件生成容器组件，

import React from 'react';

import { connect } from 'react-redux';

import Home from './home';

class AppContainer extends React.Component{

	render(

		return (

			<Home/>

		);

	)

}

const App = connect()(AppContainer);//这里的App就是生成的容器组件。

export default App;

connect( mapStateToProps , mapDispatchToProps , mergeProps , options )();

连接 React 组件与 Redux Store

mapStateToProps 该参数为一个 function mapStateToProps (state,[ownProps]){...}，定义该参数后组件就可以监听 Redux Store 的变化，任何时候只要store发生变化，该函数就会被调用，该函数必须返回一个纯对象，它会与组件的 props 结合，而第二个参数 ownProps 被指定时，它代表传递到该组件的props,且只要组件收到新的 props ，mapStateToProps 就被调用。
mapDispatchToProps 通常我们会将该参数省略，此时默认情况下，dispatch 会注入到组件的props中，在你需要出发 action 的地方(可能是某个事件函数)使用该disaptch 函数将 action 发出。

例子：

在上边例子中，我们只要点击下添加链接，组件就会通过点击事件触发 dispath 函数发送 action 到 store 中的 reducer, reducer 则根据 action 的 type 来决定执行什么操作，之后在 store 中新增一条记录(newItemId)后返回一个新的 state (里边包含Store中发生改变后的所有值)，由于组件使用 connect 将自己与 Store 绑定起来，Store 中的值发生变化就会执行 mapStateToProps,将新的 state 放入组件的 props,从而引发组件的渲染。

3. 异步中间件

也许你也已经发现了前边的介绍中有个关键的问题没解决，那就是异步操作(最典型的就是通过ajax访问后台数据)。Action 发出以后，Reducer 立即计算出 State,这叫同步，Action 发出之后，过段时间再执行 Reducer，这就是异步。如和何才能让 Reducer 在异步操作结束后自动执行呢？这就需要异步中间件来解决。

中间件通过对 store.dispatch 进行改造，在发出 Action 和执行 Reducer 这两步之间添加其他功能。中间件可以做很多事情，这里主要讲解异步中间件redux-promise-middleware的使用。

//Store.js 加载中间件

import { applyMiddleware,createStore } from 'redux';

import createPromiseMiddleware from 'redux-promise-middleware';

import reducer from './reducers/index';

const store = createStore({//createStore 可以接受应用初始状态作为参数，这时， `applyMiddleware` 就是第三个参数。

	reduer,

	applyMiddleware([createPromiseMiddleware()])

});

export default store;

发起异步action#

//actions.js

export const getTodos = () => {

  const apiUrl = `/todos`;

  return {

    type: GET_TODO,

    //属性 payload 值为 Promise 类型（中间件据此判断是否需要异步处理）

    payload: fetch(apiUrl).then(response => {

      if (!response.ok) {

        //请求返回的可能是500等错误，也会执行到这里，需将状态设置为 rejected

        return Promise.reject(response.status);

      }

      return response.json();

    })

  };

}

处理异步 actions#

一般 action 的处理,发起和处理是一一对应的，而异步 action 则有三个 action 来处理，分别对应异步的三种状态

${GET_TODO}_PENDING 异步请求执行后会立刻 dispatch 此 action，表示请求已发出，正在等待返回值
${GET_TODO}_FULFILLED 异步请求成功后会 dispatch 此 action，注意 Response 只要回来，即使是 500，也会执行到这里
${GET_TODO}_REJECTED 异步请求失败后会 dispatch 此 action

上述三个 action 及后缀皆为中间件redux-promise-middleware的约定，不同中间件约定可能不一致。

//reducer.js

case `${GET_TODO}_PENDING`: {

  return {

    status: FetchStatus.LOADING,

  }

}

case `${GET_TODO}_FULFILLED`: {

  return {status: FetchStatus.SUCCESS, items: action.payload};

}

case `${GET_TODO}_REJECTED`: {

  return {status: FetchStatus.FAILURE, error: action.payload};

}

码农公寓