react-redux(1)
基础
Array.prototype.reduce
//类似的核心思想
const initState = '';
const actions = ['a', 'b', 'c'];
const newState = actions.reduce(
( (prevState, action) => prevState + action ),
initState
);
//action: actions;
//state: initState,newState;
//reducer: (prevState, action) => prevState + action //计算
Action
- 描述有什么事情发生了;
{
type: 'ADD_TODO',
text: 'Build Redux app'
}
- 改变
State
只能通过actions
, 使用store.dispatch()
。并且,每一个action
都必须是Javascript Plain Object
; - 为保证状态保存、回放、Undo 之类的功能可以被实现,
action
必须是可以被序列化的因此,不能包含如函数调用这样的不可序列化字段; type
是必须要有的字符串属性; 建议文档;- 好的结构中应该每次
action
传需要的数据而不是整个
{
type: SET_VISIBILITY_FILTER,
filter: SHOW_COMPLETED
}
Action Creator
- 事实上,创建
action
对象更多地是通过一个创建函数;
function addTodo(text) {
return {
type: ADD_TODO,
text
};
}
//触发
dispatch(addTodo(text));
dispatch
可以直接来自store.dispatch
;
handleClick() {
// Works! (but you need to grab store somehow)
store.dispatch(addTodo('Fix the issue'));
}`
react-redux
中可以通过connect(mapStateToProps,mapDispatchToProps)(Counter)
;mapStateToProps
函数通过返回一个映射对象selector
,指定了 Store/State属性映射到React Component
的this.props
的情况;
class AddTodo extends Component {
handleClick() {
// Works!
this.props.dispatch(addTodo('Fix the issue'));
}
....
}
//将dispatch和state放入props
export default connect(select)(AddTodo);
- 或者结合
bindActionCreators(actionCreators, dispatch);
import * as CounterActions from '../actions/counter';
function mapStateToProps(state) {
return {
counter: state.counter
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(CounterActions, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(Counter); //可以直接添加actionCreators
//调用
<button onClick={this.props.addTodo}/>add</button>
Reducers
- 描述事情发生后
state
如何改变;
更新成员
为了确保
State
的消费者在判断数据是否变化时,只要简单地进行引用比较避免Deep Equal
的遍历,需要确保State
中每个节点都是不可改变的;在
Reducer
中更新State
成员需要增加
//对象
let counters = {
faves: 0,
forward: 20,
}
// this creates a brand new copy overwriting just that key
counters = {...counters, faves: counters.faves + 1}
//数组; 调换顺序,可以改变增加的位置;
let todos = [
{ id: 1, text: 'have lunch'}
]
todos = [...todos, { id: 2, text: 'buy a cup of coffee'} ]
- 删除
//数组
let users = [...];
users = users.filter(user=> user.id !== find.id)
- 由于更新数据的差异:如对于数组型
react:state
操作后,会同时更新操作位置之后的数据;而redux则只会更新操作位置的数据;
同步执行
Reducer
的执行是同步的;- 在给定
initState
以及一系列的actions
,都应该得到相同的newState
;
分割reduce
Reducer
和action.type
是多对多的关系;
export default function counter(state = 0, action) {
switch (action.type) {
case INCREMENT_COUNTER:
return state + 1;
case DECREMENT_COUNTER:
return state - 1;
default:
return state;
}
}
- 在程序变多时可以使用
combineReducers({field1: reducerForField1,....})
来管理- 每个
reducerForField1
将仅仅获得State.field1
的值,而看不到State
下的其他字段的内容; - 响应的返回结果也会被合并到对应的
State
字段中;
- 每个
import { combineReducers } from 'redux';
const todoAppReducer = combineReducers({
visibilityFilter: visibilityFilterReducer
todos: todosReducer
});
//
visibilityFilterReducer 仅仅负责处理 State.visibilityFilter 字段的状态
- 注意使用
combineReducers
的前提是,每一个被组合的Reducer
仅仅和State
的一部分数据相关; - 如果需要消费其他
State
字段,那还是需要在大switch
中为特定处理函数传入整个State
;
function todoAppReducer(state = initialState, action) {
switch (action.type) {
case FAVE_ALL_ITEMS:
return Object.assign({}, state, faveThemAll(state));
default:
return state;
}
}
Store
- 维护应用程序状态的对象;
- 构造
Store
对象,仅需要提供一个Reducer
函数;
import { combineReducers, createStore } from 'redux';
import * as reducers from './reducers';
const todoAppReducer = combineReducers(reducers);
const store = createStore(todoAppReducer); // Line 5
store.dispatch({type: 'ADD_TODO', text: 'Build Redux app'});
- 可以在
createStore
的时候为Store
指定一个初始状态;
const store = createStore(reducers, window.STATE_FROM_SERVER);
方法
store.getState()
: 获取最近的内部状态对象;store.dispatch(action)
: 将一个action
对象发送给reducer
;store.subscribe(listener)
:订阅状态的变化;并不推荐使用, 可以搭配Observable
模式的程序,react
中不建议;
Provider Component
- 通过
Provider Component
来设定connect
从哪里获得store
对象;
React.render(
<Provider store={store}>
{() => <MyRootComponent />} //react 0.14: <MyRootComponent />
</Provider>,
rootEl
);
主要流程
- 设置
redecers
,分片的话使用redux: combineReducers
; - 创建
store
,使用redux: createStore
,传入reducers
; - 在特定的组件/顶层组件绑定状态和
dispatch
,使用react-redux: connet
,传入状态映射selector
; - 将
store
关联到绑定后的特定/顶层组件,使用react-resuc: Provider
; - 设置
actions
,并在组件想要调用的地方触发this.props.dispatch()
,自动更新state
;
其他
- 在绑定组件时使用
redux: bindActionCreators
,connect
传入第二参数,直接将dispatch(actions)
传入组件ptops
; //注意此时action
则必须是Action Creator
; - 在创建
store
时使用redux: applyMiddleware
先传入中间件,再创建
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from '../reducers';
const createStoreWithMiddleware = applyMiddleware(
thunk
)(createStore);
export default function configureStore(initialState) {
const store = createStoreWithMiddleware(reducer, initialState);
return store;
}
//
const store = configureStore();
react-redux(1)的更多相关文章
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- react+redux教程(六)redux服务端渲染流程
今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...
- react+redux教程(五)异步、单一state树结构、componentWillReceiveProps
今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...
- react+redux官方实例TODO从最简单的入门(6)-- 完结
通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...
- react+redux官方实例TODO从最简单的入门(1)-- 前言
刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...
- 重写官方TodoList,对于初学react+redux的人来说,很有好处
虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...
- react+redux教程(四)undo、devtools、router
上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...
- react+redux教程(三)reduce()、filter()、map()、some()、every()、...展开属性
reduce().filter().map().some().every()....展开属性 这些概念属于es5.es6中的语法,跟react+redux并没有什么联系,我们直接在https:// ...
- react+redux教程(二)redux的单一状态树完全替代了react的状态机?
上篇react+redux教程,我们讲解了官方计数器的代码实现,react+redux教程(一).我们发现我们没有用到react组件本身的state,而是通过props来导入数据和操作的. 我们知道r ...
- react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware
今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...
随机推荐
- codeforces 493A. Vasya and Football 解题报告
题目链接:http://codeforces.com/contest/493/problem/A 题目意思:给出两个字符串,分别代表 home 和 away.然后有 t 个player,每个playe ...
- C#string类;math类;datetime类
String类: .Length字符的长度 .Trim()去掉开头以及结尾的空格 .TrimStart()去掉字符串开头的空格 .TrimEnd()去掉字符串后面的空格 .ToUpper()全 ...
- 【processing】小代码5
3D void setup() { size(,,P3D); } void draw() { background(); lights(); noStroke(); translate(,,-); r ...
- eclipse的使用一
The type java.lang.Object cannot be resolved. It is indirectly referenced from required .class files ...
- UIDynamic动画
UIDynamic是从iOS7开始引入的技术 属于UIkit框架 可以模拟显示生活中的物理现象 如碰撞 抖动 摆动等 一.使用UIDynamic步骤: 1.创建一个动力效果器UIDynamicAnim ...
- 模拟赛1102d2
/* φ(n)=φ(p^k)=p^k-p^(k-1)=(p-1)*p^(k-1) φ(m*n)=φ(m)*φ(n) 直接套公式做,因为分解质因数时,只分解一个数,所以可以不打素数表,只将n分解到√n就 ...
- JS 打印对象的方法
2 3 4 5 6 7 8 function writeObj(obj){ var description = ""; for(var i in obj){ var p ...
- NYOJ_37.回文字符串 (附滚动数组)
时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 所谓回文字符串,就是一个字符串,从左到右读和从右到左读是完全一样的,比如"aba".当然,我们给你的问 ...
- NYOJ题目97兄弟郊游问题
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAr8AAAHxCAIAAADrwUM4AAAgAElEQVR4nO3dLXLjytfH8f8mzLOQYC
- NYOJ题目1082买新书了
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsoAAAI5CAIAAAA38ougAAAgAElEQVR4nO3dPVLjStsG4G8T5CyE2A