美文网首页
redux 笔记

redux 笔记

作者: 程一刀 | 来源:发表于2019-02-27 10:15 被阅读0次

1.发起 action
2.通过reducer ,产生新的state,combineReducers 用来合成
3.Store:Store 就是把它们联系到一起的对象* 维持应用的 state;

import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp)

4.容器组件
4.1使用 connect() 前,需要先定义 mapStateToProps 这个函数来指定如何把当前 Redux store state 映射到展示组件的 props 中
4.2定义 mapDispatchToProps()方法注入action
4.3生成容器组件

import { connect } from 'react-redux'

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

5.异步action
通过使用指定的 middleware,action 创建函数除了返回 action 对象外还可以返回函数
我们使用了 applyMiddleware() 在dispatch 机制中引入 Redux Thunk middleware
默认情况下,createStore() 所创建的 Redux store 没有使用 middleware,所以只支持 同步数据流
你可以使用 applyMiddleware() 来增强 createStore()。虽然这不是必须的,但是它可以帮助你用简便的方式来描述异步的 action

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers/rootReducer';

let createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
let store = createStoreWithMiddleware(rootReducer);
// let state = store.getState();
// alert(state.Search.searchText)
export default store;

链接:http://cn.redux.js.org

相关文章

  • Redux 笔记一:简单串讲

    Redux 笔记一:简单串讲 React 笔记一:简单串讲 Redux 笔记一:简单串讲 介绍 Redux并不是R...

  • Redux初步理解

    Redux笔记 参考理解 Redux 中文文档Redux 阮一峰 严格的单向数据流是Rduex设计核心。 Redu...

  • Redux-saga

    Redux-saga学习笔记说到中间件Redux-saga之前不得不提一下Redux-thunk(详细请访问:ht...

  • redux and react-redux

    感谢react小书作者,看了三遍,对redux有了点了解,写下随手笔记。 redux: 一、createStore...

  • GraphQL笔记一:简单串讲

    GraphQL笔记一:简单串讲 React 笔记一:简单串讲 Redux 笔记一:简单串讲 当然GraphQL和R...

  • 详解react、redux、react-redux之间的关系

    本文介绍了react、redux、react-redux之间的关系,分享给大家,也给自己留个笔记,具体如下: Re...

  • 详解react、redux、react-redux之间的关系

    本文介绍了react、redux、react-redux之间的关系,分享给大家,也给自己留个笔记,具体如下: Re...

  • Redux笔记

    state值变了,但是组件没被渲染? reducer是一个纯函数,不能在reducer直接修改state。redu...

  • redux笔记

    Redux 要求 UI 的渲染组件都是纯组件,即不包含任何状态(this.state)的组件。 进行数据处理、并包...

  • Redux笔记

    学习目的 了解和熟练使用 Redux,能够在实际项目中运用。 学习方法:类比 VueX Redux 比...

网友评论

      本文标题:redux 笔记

      本文链接:https://www.haomeiwen.com/subject/rlhxuqtx.html