Redux和React-Redux的实现(一):Redux的实现和context

react使用redux做状态管理,实现多个组件之间的信息共享,解决了父子组件、兄弟组件之间的复杂通信问题。vue有vuex,总之是一种flux的思想。react提供了react-redux这个库,一看名字就知道是为了将react和redux关联起来,react-redux有connect高阶函数以及Provider组件、milddleware、thunk等,来实现一下。

篇幅过长,多分了几篇。

1. Redux简单实现



这里先不考虑中间件机制

import { createStore } from ‘redux‘

function counter(state = 10, action) {
  console.log(state, action)
  switch (action.type) {
    case ‘add‘:
      return state + 1
    case ‘less‘:
      return state - 1
    default:
      return state
  }
}

const store = createStore(counter)

const init = store.getState()
console.log(`Init count: ${init}`)

function listener(){
  const current = store.getState()
  console.log(`count: ${current}`)
}
store.subscribe(listener)

store.dispatch({ type: ‘add‘ })
store.dispatch({ type: ‘less‘ })

这是redux简单的例子,首先我们定义了一个reducer叫做counter,接下来使用redux提供的createStore方法将reducer传入,构造出了一个store,然后基于观察者模式,触发相应的action,进行相应的响应。

Redux重点的方法就是createStore、getState、subscribe、dispatch这四个方法。大体讲一下思路,我们的Redux,这里就叫myRedux,myRedux和Redux一样,都是只暴露出来一个方法,那就是createStore,然后createStore保存着一个state,可以是对象、字符串、数组等,可以通过getState方法来访问state,还有对state的监听器以及订阅的方法,实现一下。

export function createStore (reducer) {
  let state = {}
  let listeners = []

  function getState () {
    return state
  }
  function subscribe (listener) {
    listeners.push(listener)
  }
  function dispatch (action) {
    state = reducer(state, action)
    listeners.forEach(listener => listener())
    return action
  }
  // 为了确保createStore之后,store.getState中就有state的初始值
  dispatch({type: ‘@myRedux/qwe‘})
  return {getState, subscribe, dispatch}
}

其实就是一个观察者模式,值得注意的是:当执行完createStore之后,执行stroe.getState方法就能获取到初始的状态(我们这里是10),所以需要我们的reducer先执行一次,那么我们就要在createStore中就先dispatch一下,代码中有体现。Redux中也是这么做的,Redux初始化dispatch的type值是@@redux/INIT,可以看一下。

这么做是为了确保初始化dispatch的type值不会和用户定义的type值重复,我们代码里type为@myRedux/qwe

2.react中的context



要理解react-redux原理,必须先说下react中的context。父组件向子组件传递数据,可以通过props,如果层级比较深呢?就不好了,会有性能问题,我们可以通过context来实现跨级传递数据。

context是全局的,在组件中声明,所有的子组件都可以获取到context,react觉得全局不是很安全,所以要求context都是强数据类型,即任何想访问context里面的属性的组件都必须指定一个contextTypes的属性,如果没有指定该属性的话,用this.context访该属性就会出错。

同样,通过getChildContext方法指定传递给子组件的属性也需要被指定数据类型,通过childContextTypes来指定,不指定同样会产生错误。

下面是一个简单例子。

import React from ‘react‘
import PropTypes from ‘prop-types‘

class Son extends React.Component{
    render(){
            return (
                <div>
                    <p>子组件</p>
                    <GrandSon/>
                </div>
            )
    }
}

class GrandSon extends React.Component{
    static contextTypes = {
        user:PropTypes.string
    }
    render(){
        console.log(this.context)
        return (
                <div>
                    <p>孙组件</p>
                    <div>孙组件收到来自父组件的信息:{this.context.user}</div>
                </div>
        )
    }
}

class Father extends React.Component{
    static childContextTypes = {
        user:PropTypes.string
    }
    constructor(props){
        super(props)
        this.state = {user:‘user12‘}
    }
    getChildContext(){
        return this.state
    }
    render(){
        return (
            <div>
                <p>父组件,要给孙组件:{this.state.user}</p>
                <Son/>
            </div>
        )
    }
}

export default Father

在这里就不需要通过props一层一层的往下传递属性了,这就是context。

3.Provider组件



那么context和我们的react-redux有什么关系呢,用过的都知道,Provider组件在整个应用组件上包了一层,让整个应用组件成为Provider的子组件,看到这里,你是不是有点懂了,跟上面的例子很像嘛,对的,就是这样,我们的Provider组件接收Redux的store作为props,通过context对象传递给子组件。

我们下一篇就会说道Provider组件。

原文地址:https://www.cnblogs.com/isLiu/p/8117427.html

时间: 2024-11-06 20:48:48

Redux和React-Redux的实现(一):Redux的实现和context的相关文章

理解 React,但不理解 Redux,该如何通俗易懂的理解 Redux?

作者:Wang Namelos链接:https://www.zhihu.com/question/41312576/answer/90782136来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. . React有props和state: props意味着父级分发下来的属性,state意味着组件内部可以自行管理的状态,并且整个React没有数据向上回溯的能力,也就是说数据只能单向向下分发,或者自行内部消化.理解这个是理解React和Redux的前提.2. 一般构建的R

理解 React,但不理解 Redux,该如何通俗易懂的理解 Redux?(转)

作者:Wang Namelos 链接:https://www.zhihu.com/question/41312576/answer/90782136来源:知乎 解答这个问题并不困难:唯一的要求是你熟悉React.不要光听别人描述名词,理解起来是很困难的.从需求出发,看看使用React需要什么:1. React有props和state: props意味着父级分发下来的属性,state意味着组件内部可以自行管理的状态,并且整个React没有数据向上回溯的能力,也就是说数据只能单向向下分发,或者自行内

Redux 和React 结合

当Redux 和React 相接合,就是使用Redux进行状态管理,使用React 开发页面UI.相比传统的html, 使用React 开发页面,确实带来了很多好处,组件化,代码复用,但是和Redux 接合时,组件化却也带来了一定的问题,组件层层嵌套,有成千上百个,而store确只有一个,组件中怎么才能获取到store?  页面UI就是显示应用程序状态的,如果获取不到store中的state, 那就没法渲染内容了.还有一个问题,就是如果状态发生了变化,组件怎么做到实时监听,实时显示最新的状态?

[Redux] Adding React Router to the Project

We will learn how to add React Router to a Redux project and make it render our root component. Install: npm install --save react-router import React from 'react'; import {Provider} from 'react-redux'; import {Router, Route} from 'react-router'; impo

react 脚手架 及路由和 redux

前提是我们需要下载 nodejs 使用 npm 下载 react 的脚手架,react-router-dom,redux 全局下载 react 的脚手架:npm i create-react-app -g 使用 react 脚手架创建一个 app 的项目:create-react-app app 根据指令进入 app 项目: cd app 下载 react 的路由插件:npm i react-router-dom -S 组件通信的优化: npm i redux -S 以上便是把我们的 react

Redux和React

export app class Compo1 extends Component{ } Compo1.propType = { a:PropTypes.string, fn:PropTypes.func.isRequired}限制父类组件输入参数的属性isRequired 必输 生命周期 组件从诞生到消亡,程序提供了各个阶段:1.上树阶段 Mounting,按顺序调用下列方法:1)constructor ()构造器2)componentWillMount() 正在上树3)render () 显

Redux 管理React Native数据

现在让我们看看大致的流程: React 可以触发 Action,比如按钮点击按钮. Action 是对象,包含一个类型以及相关的数据,通过 Store 的 dispatch() 函数发送到 Store. Store 接收 Action 的数据并将其连同当前的 state 树(state 树是包含所有 state 的一种特殊的数据结构,是一个单一的对象)发给 Reducer. Reducer 是一个多个函数的合成函数(当然一般都是),它接收一个之前的 state 和一个 Action:并基于此 A

ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例

工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说,我这个工程十分便捷,对于初学者来说,可能包含到以下的一些知识点: 一.React-Router的使用 Router是为了方便管理组件的路径,它使用比较简单,一般定义如下就行,需要注意的是,react-router的版本有1.0-3.0,各个版本对应的API大致相似,但也有不同,我使用的是2.X的,

Flux --&gt; Redux --&gt; Redux React 入门 基础实例使用

本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推荐使用 ES6+React+Webpack 的开发模式,但Webpack需要配置一些东西,你可以先略过,本文不需要Webpack基础 入门,只是一些基础概念和用法的整理,更完整的内容推荐去看看文档,英文,中文 (不过我个人认为,官方文档的例子相对来说太复杂了,很难让新手马上抓住重点) (官方的例子正

React,关于redux的一点小见解

最近项目做多页面应用使用到了,react + webpack + redux + antd去构建多页面的应用,本地开发用express去模拟服务端程序(个人觉得可以换成dva).所以在这里吐槽一下我自己对于redux的一些见解. Redux是状态管理的服务,可以当作是mvc中的controller层,你也可以把它认为是mvvm中vm层.虽然它本身受到Flux的影响很大,但是它的核心概念缺很简单,就是Redue也就是ES5中Array.prototype.reduce,这个reduce用于合并数组