Redux学习笔记

Redux

起步

state是只读的

唯一改变state的方法就是触发action，action是一个用于描述已发生事件的普通对象

使用纯函数来进行修改

Action

Action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。

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

Action创建函数

在 Redux 中的 action 创建函数只是简单的返回一个 action:

Javascript

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

Reducer

Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。

用来修改state里的值就是redux

Store

store.getState：获取state
store.dispatch({})：分派，分派人物给绑定的Reducer来处理
store.subscribe(function(){})：监听，一旦数据发生变化则会触发里面的函数，监听完成后会返回一个取消监听的函数，可通过执行返回的函数来取消监听

在创建Store对象时可以传入一个对象

Javascript

let couter = (state = 0,action) => {
	return state
}

let user = (state = "zrb",action)=> {
	return state
}

const store = createStore(combineReducers({
	couter: couter,
	user: user
}))

现在store里就有连个数据了，分别对应着Reducers

设置初始值

Code

let couter = (state,action) => {
	return state
}

let user = (state,action)=> {
	return state
}

const store = createStore(combineReducers({
	couter: couter,
	user: user
}),{
	couter: 1,
	user: "zrb"
})

这样就不需要在函数里写默认值了，也比较方便异步获取数据时的填充

React中使用Redux

Redux 和 React 之间没有关系。Redux 支持 React、Angular、Ember、jQuery 甚至纯 JavaScript。

首先先安装redux

npm install --save react-redux和npm install --save redux

引入，这里直接上代码

Javascript

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'

let store = createStore(todoApp)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

其他页面

Code

1
2
3

import { connect } from "react-redux";

export default connect()(App);

如果在this.props中就会有dispatch函数了

当使用combineReducers多个状态的时候，也之后有一个dispatch，只要type和data匹配的上就可以

基本用法

Code

import { createStore } from "redux";

// 接收连个参数一个是state，初始参数
// 第二个参数是action

 function add(state = 1, action) {
        switch (action.type) {
          case "edit":
            return (state = action.data);
          default:
            return state;
   }
}

const store = createStore(add)	// 创建一个storage

// 通过创建出来的store对象，调用dispatch对象来设置action
store.dispatch({type: "edit",data: "hhh"});

// 通过getState方法来获取现在state的值
store.getState();		// hhh

// 没有匹配到类型所以直接返回了
store.dispatch({type: "add",data: "add"})
store.getState();	// hhh