Redux的工作流程

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};
}



原文地址：https://www.cnblogs.com/goodjobluo/p/9077010.html
				


				
时间： 2024-10-10 23:33:32 

		


		


	

	
	

		


		
Redux的工作流程的相关文章


								

		

			

                GitHub超详细图文攻略 - Git客户端下载安装 GitHub提交修改源码工作流程 Git分支 标签 过滤 Git版本工作流（转载）
			

		

		

									

				最近听同事说他都在使用GitHub,GitHub是程序员的社区,在里面可以学到很多书上学不到的东西,所以最近在准备入手这方面的知识去尝试学习,正好碰到这么详细完整的文章,就转载了,希望对自己和大家有帮助. GitHub操作总结 : 总结看不明白就看下面的详细讲解. GitHub操作流程 : 第一次提交 : 方案一 : 本地创建项目根目录, 然后与远程GitHub关联, 之后的操作一样; -- 初始化Git仓库 :git init ; -- 提交改变到缓存 :git commit -m 'desc			

		

	

				

		

			

                Struts2工作流程
			

		

		

									

				Struts2是一个非常优秀的MVC框架,它主要通过StrutsPrepareAndExecuteFilter过滤器将Struts2集成到Web应用中的. 基本工作流程: 1.客户端提交一个HttpServletRequest请求(action或JSP页面): 2.请求经过一系列的过滤器(如ActionContextCleanUp,SiteMesh等): 3.Struts2的核心过滤器StrutsPrepareAndExecuteFilter被调用,并询问ActionMapper来决定这个请求是			

		

	

				

		

			

                Laravel 5系列教程二：路由,视图,控制器工作流程
			

		

		

									

				免费视频教程地址https://laravist.com/series/laravel-5-basic 上一篇教程我们走了那么长的路,终于把Laravel安装好了,这一篇教程我们就要进入Laravel的神奇世界了,主要是讲解Laravel的Router,Views,Controllers的工作流程,目的也就是让大家明白Laravel在处理一个get请求的时候是如何工作的. 在开始之前,我们首先得将我们的服务器启动起来,如果你使用Laravel的artisan,你可以直接: php artisan			

		

	

				

		

			

                RT-thread finsh工作流程
			

		

		

									

				finsh是RT-Thread的命令行外壳(shell),提供一套供用户在命令行的操作接口,主要用于调试.查看系统信息.在大部分嵌入式系统中,一般开发调试都使用硬件调试器和printf日志打印,在有些情况下,这两种方式并不是那么好用.比如对于RT-Thread这个多线程系统,我们想知道某个时刻系统中的线程运行状态.手动控制系统状态.如果有一个shell,就可以输入命令,直接相应的函数执行获得需要的信息,或者控制程序的行为.这无疑会十分方便. finsh支持两种模式: 1. C语言解释器模式, 为			

		

	

				

		

			

                [Servlet]Servlet的工作流程及注意事项
			

		

		

									

				Servlet工作流程 利用Servlet完成的Web应用的实际工作流程是通过Tomcat服务器发布服务,客户端与服务器端之间的交互遵循Http协议完成的.具体工作流程如下: 客户端浏览器向服务器端发送请求. 服务器端由Tomcat服务器提供的Servlet容器解析接收到的请求. 通过Web应用程序的配置文件web.xml,解析到对应执行的Servlet. Servlet完成客户端发送的请求逻辑,并完成向客户端发送的响应内容. 由Tomcat服务器提供的Servlet容器向客户端浏览器进行响应.			

		

	

				

		

			

                Ajax的工作流程简述
			

		

		

									

				提到Ajax相信我们都不会陌生,不管你是前端开发还是后台数据处理的程序员,ajax的作用就像现在生活中的手机一样,无论是作用还是流程都差不多,这里我们要进行ajax操作后台数据并显示在页面上的话,首先我们这里才用原生态的ajax去实现,第一步要做的就是首先我们得有一个ajax才行,紧接着还得清楚他的工作流程才行啊,下面我就简单谈谈ajax的工作流程.     v作为一个刚接触ajax的信任来说肯定会觉得很神奇,不知道一个小小的ajax竟然有这种强大的功效实现这样复杂的任务,其实不然,当我们除去包			

		

	

				

		

			

                图解EJB工作流程
			

		

		

									

				学习EJB需要对JNDI和RMI方面知识有一定的了解. JNDI为EJB提供命名和目录服务,实现不同目录位置的Bean的唯一标识. RMI为EJB提供远程访问能力,实现Bean的远程调用功能 在介绍Bean的工作流程之前,先熟悉一下RMI的工作流程 RMI设计的目标:实现运行在不同JVM中Java对象的调用 客户端通过JNDI服务获取Bean对象的接口,称为桩(stub) 一般情况下Bean对象并不希望被直接操控,比如针对不同客户端暴露不同接口,所以在JVM2上也提供一个对外接口,称为骨架(sk			

		

	

				

		

			

                Struts2的工作流程
			

		

		

									

				Struts2的工作流程 1.客户端浏览器初始化时发出HTTP请求 2.根据web.xml配置,上述请求被FilterDispatcher接收 3.根据struts.xml配置,找到需要调用的Action类和方法, 并通过IoC方式,将值注入给Aciton 4.Action调用业务逻辑组件处理业务逻辑 5.Action执行完毕,根据struts.xml中的配置找到对应的返回结果result,并跳转到相应页面 6.返回HTTP响应到客户端浏览器			

		

	

				

		

			

                1、SpringMVC的工作流程
			

		

		

									

				1.简单的谈一下SpringMVC的工作流程? 流程 1.用户发送请求至前端控制器DispatcherServlet 2.DispatcherServlet收到请求调用HandlerMapping处理器映射器. 3.处理器映射器找到具体的处理器,生成处理器对象及处理器拦截器(如果有则生成)一并返回给DispatcherServlet. 4.DispatcherServlet调用HandlerAdapter处理器适配器 5.HandlerAdapter经过适配调用具体的处理器(Controller