react服务端渲染(七)redux添加

  1. 使用,添加一个redux-thunk中间件,支持异步action操作

    import { Provider } from ‘react-redux‘;
    import { createStore, applyMiddleware } from ‘redux‘;
    import thunk from ‘redux-thunk‘;
    
    import Router from ‘../router‘
    import Rducer from ‘../reducer‘
    
    const Store = createStore(Rducer, applyMiddleware(thunk));
    
    const App = () => {
        return(
            <Provider store={Store}>
                <BrowserRouter>
                    <Router/>
                </BrowserRouter>
            </Provider>
        )
    }
  2. 默认情况下redux只能dispatch一个plain object,例如:
    dispatch({
        type: ‘SOME_ACTION_TYPE‘,
        data: ‘xxxx‘
    });

    使用 redux-thunk 之后,可以dispatch一个函数了,这个函数会接收dispatch, getState作为参数,在这个函数里你就可以干你想干的事情,在任何地方随意dispatch了,例如下面这个ajax请求:

    dispatch(function (dispatch) {
        $.get(‘/api/users‘, function(users) {
            dispatch({
                type: ‘FETCH_USERS_SUCCESS‘,
                users: users,
            });
        });
    });
  3. 这时候有一个疑问,redux-thunk的作用是什么?为什么不用异步dispatch(action)来调用?

    //thunk
    export const test = () => {
        return dispatch => {
            setTimeout(()=>{
                dispatch({type: "change"})
            },1000)
        }
    }
    //异步dispatch
    export const test2 = (dispatch)=> {
        setTimeout(()=>{
            dispatch({type: "change"})
        },1000)
    }

    这二者有什么区别?

  4. 这两种写法对组件来说是没有任何区别的。我们需要注意的是redux-thunk是一个中间件,作用是对redux进行功能的增强,也就是在redux的流程中进行一些其他的处理,redux的流程:action-> dispatcher -> reducer -> store tree changed -> relative components re-render -> UI changed;我们使用thunk是在dispatch action以及action 到达action之间进行一些其他的操作。而我们直接使用异步dipatch并没有增强我们redux的功能!(暂时想到的区别就只有这个)

原文地址:https://www.cnblogs.com/longlongdan/p/11283878.html

时间: 2024-10-07 16:52:14

react服务端渲染(七)redux添加的相关文章

react服务端渲染(同构)

学习react也有一段时间了,使用react后首页渲染的速度与seo一直不理想.打算研究一下react神奇服务端渲染. react服务端渲染只能使用nodejs做服务端语言实现前后端同构,在后台对react组件进行解析并生成html字符串后返回视图页面. 后台为什么可以解析react组件?因为Node.js是一个Javascript运行环境,nodejs与javascript语法基本是相同的,所以nodejs可以正常解析react组件. 一.准备动作 1.安装nodejs与安装express 安

React服务端渲染总结

欢迎吐槽 : ) 本demo地址( 前端库React+mobx+ReactRouter ):https://github.com/Penggggg/react-ssr.本文为笔者自学总结,有错误的地方恳请各位指出 O(∩_∩)O          序:前言.原因与思路.注意事项与问题.详解.       一.前言 为什么需要服务端渲染?什么情况下进行服务端渲染?笔者认为,当我们要求渲染时间尽量快.页面响应速度快时(优点),才会采用服务器渲染,并且应该“按需”对页面进行渲染 ——“首次加载/首屏”

react服务端渲染框架

客户端渲染 加载一个空的html页面,然后请求一个打包的js文件,然后再客户端执行这个js文件 动态生成html内容然后插入到DOM元素上,在源代码查询中也只能看到空的html文档 没有任何其他内容 服务端渲染 加载出来的就带有完整的html文档内容(同时带有数据) 流程: 浏览器发送请求 --> 服务器端运行react代码生成页面 --> 服务器端返回渲染的页 客户端渲染:react代码在浏览器上执行,消耗的是用户浏览器的性能 服务端渲染:react代码在服务器上执行,消耗的是服务器端的性能

react服务端渲染(九)proxy代理&amp;&amp;多级路由&amp;&amp;数据的脱水和注水

使用reducer之后 我们现如今无法使用reducer来替代createStore来实现服务端的渲染! 服务端渲染之后,客户端会再次渲染,因为我们的客户端创建的store为空.解决办法:在服务端渲染的时候将获取到的数据赋值一个全局变量,客户端创建的store以这个变量的值作为初始值. const Store = createStore(Rducer,window.info,applyMiddleware(thunk)); 中间层代理转发,我们的浏览器端渲染之前是直接发送'http://47.9

react服务端渲染(八)路由改写

每一个用户使用不同的store 请求发送axios/fetch,选择使用fetch进行异步请求的发送 在浏览器端可以直接使用fetch发送,无需安装.但是服务端会报error:fetch is not defined,因为fetch()是为浏览器设计的,然后在第三方模块中后端移植到node.js,所以需要安装node-fetch: import fetch from 'node-fetch' 定义常量保存字符串 避免错误难以发现 componentDidMount只会在客户端执行 服务端不执行,

react+redux教程(六)redux服务端渲染流程

教程目录 react+redux教程(一)connect.applyMiddleware.thunk.webpackHotMiddleware react+redux教程(二)redux的单一状态树完全替代了react的状态机? react+redux教程(三)reduce().filter().map().some().every()....展开属性 react+redux教程(四)undo.devtools.router react+redux教程(五)异步.单一state树结构.compo

基于react的nextjs服务端渲染框架学习使用

开发文档 https://nextjs.frontendx.cn/ 源码 该博客的示例代码我已经上传到github,欢迎star或者fork react-next-hello Next介绍 Next.js是一个基于React的一个服务端渲染简约框架.它使用React语法,可以很好的实现代码的模块化,有利于代码的开发和维护. Next.js带来了很多好的特性: 默认服务端渲染模式,以文件系统为基础的客户端路由 代码自动分隔使页面加载更快 (以页面为基础的)简洁的客户端路由 以webpack的热替换

React(0.13) 服务端渲染的两个函数

1.React.renderToString 函数,  参数是组件,返回一个字符串 <!DOCTYPE html> <html> <head> <title>React JS</title> <script src="../build_0.13/react.js"></script> <script src="../build_0.13/JSXTransformer.js"&g

react+laravel与服务端渲染的思考

1.首先 controller 几乎不写代码是不可能的.我现在就是 react.js 和 laravel 一起用,前后端完全分离的. 用 react.js 搭建前端视图,然后用 ajax 或者 fetch 来和 laravel 通信.laravel 写的接口代码几乎都在 controller 里面. 2.不要 react.js 和 laravel 的 blade 混写,要么要么完全分离,要么就完全用 blade 不然项目大一点痛苦就来了. 3.更不要想用 laravel 来服务端渲染 react