react之Redux学习

责编:menVScode 2017-06-22 23:02 阅读(834)

        首先要安装redux:

npm install redux --save

        安装成功后,我们可以在node_modules文件夹下面找到redux的包文件,然后打开其中的index.js文件,可以看到结尾暴露出了的方法

import createStore from './createStore'
import combineReducers from './combineReducers'
import bindActionCreators from './bindActionCreators'
import applyMiddleware from './applyMiddleware'
import compose from './compose'
import warning from './utils/warning'
.....
.....
export {createStore, combineReducers, bindActionCreators, applyMiddleware, compose }

        createStore.js文件中函数createStore()有三个参数,其中reducer是必传的,最后函数返回方法。dispath,getState,subscribe平时开发用的比较多。

export default function createStore(reducer, preloadedState, enhancer) {
  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
    enhancer = preloadedState
    preloadedState = undefined
  }

  if (typeof enhancer !== 'undefined') {
    if (typeof enhancer !== 'function') {
      throw new Error('Expected the enhancer to be a function.')
    }

    return enhancer(createStore)(reducer, preloadedState)
  }

  if (typeof reducer !== 'function') {
    throw new Error('Expected the reducer to be a function.')
  }
  .........
  .........
  return { dispatch, subscribe, getState, replaceReducer, [$observable]: observable }
}

使用Redux的情况

        1、某个组件的状态,需要共享给其他组件使用;

        2、某个状态在任何时候,都要被使用到,比如:登入状态;

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

        4、一个组件改变另一个组件状态的时候;

不使用redux

        1、用户操作简单

        2、用户之间没有协作

        3、不需要与服务器的大量交互


        redux的核心:store,action,reducer

        1、store可以看成是一个保存数据的地方,一个容器。(react中的一个数据库)整个应用只能有  有一个store。Store 有以下职责:

        -- 维持应用的 state;

        -- 提供 getState() 方法获取 state;

        -- 提供 dispatch(action) 方法更新 state,唯一一个更新state的方法;

        -- 通过 subscribe(listener)注册监听器;监听action、state的变化,一旦state发生变化,就是执行函数。

        -- 通过 subscribe(listener) 返回的函数注销监听器。

        如何创建store:

import reducer from './reducers/index'
import { createStore } from 'redux';
// createStore 接收一个函数,这个函数就是就是 reducer
let store = createStore(reducer);

        2、action

            通过 state 的状态来改变显示的东西(View)。但是,用户接触不到state, 接触的是View。state变化导致View变化。这个Action就是View发出的通知,表示state应该要变化了 action是一个对象,{} ,里面至少有一个属性  type(必须拥有),表示的就是action的名字,其他的属性可以自己设置。

            Action 本质上是 JavaScript 普通对象。我们约定,action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下,type 会被定义成字符串常量。当应用规模越来越大时,建议使用单独的模块或文件来存放 action。

{
   type:'ADD',
   text,   //==> text:text
   id    //==> id:id
}

        3、reducer

            render单独放在一个文件夹里面(reducers)

            用来改变状态的一个函数

            reducer 就是一个纯函数,接收旧的 state 和 action,返回新的 state。

            store收到action以后,给出一个新的state,View发生改变。

            这种state的计算过程就是reducer

            永远不要在 reducer 里做这些操作:修改传入参数;执行有副作用的操作,如 API 请求和路由跳转;调用非纯函数,如 Date.now() 或 Math.random()。

export default (state=0,action){
	switch(action.type){
		case 'ADD':
			return state+1
		case 'DEL':
			return state-1
		default:
			return state
	}
}

        利用redux的一个计数器小案例:react组件案例--基于redux的计数器》-- http://menvscode.com/detail/594bf64b6f402968fec7cd98

标签: redux react
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码