一:调试

注意:Redux调试工具。谷歌中搜redux同理react

新建store的时候判断window.devToolsExtension
使用compose(组合函数)结合thunk插件和window.devToolsExtens

二:Redux

Redux 是 JavaScript 状态容器,专注于状态管理的库

整体来说是单一状态。就是指的是单向的数据流

应用中所有的 state 都储存在 store 中。 惟一改变 state 的办法是dispatch触发 action,为了描述 action 如何改变 state ,需要编写 reducer。

redux中最重要的几个:store     state     action    reducer

首先安装redux   安装:http://www.cnblogs.com/kelly2017/p/7930681.html

package.json中有

react-redux把状态映射到子组件 分发reducer

redux  创建reducer action store等   

react-thunk  thunk处理发送请求异步。

import { createStore } from 'redux';
//新建一个store
//通过reducer来建立,是个形式为 (state, action) => state 的纯函数。
//reducer描述了 action 如何把老的状态state和action 生成新的状态state
// action有type
function couter(state=0, action) {
switch (action.type){
case '加':
return state+1
case '减':
return state-1
default:
return 1
}
}
const store=createStore( couter )
//1: 创建 Redux store 来存放应用的状态(根据reducer来创建)
// store 应用中所有的 state 都储存在一个单一的 store 中。
const init=store.getState()
//store.getState()随时获取最新的状态
console.log(init)
//派发事件
//需要状态变更的时候 store.dispatch(action)来提交状态变更
//改变内部 state 惟一方法是 dispatch 一个 action。
store.dispatch({type:'加'})
//console.log(store.getState())
store.dispatch({type:'加'})
//console.log(store.getState())
store.dispatch({type:'减'})
//console.log(store.getState)
function listener() {
const current=store.getState()
console.log(`现在的总数是${current}`)
}
store.subscribe(listener)
//subscribe 订阅事件
//store.subscribe来监听每次state修改
//每次dispatch都会执行listener

运行结果:

2:Redux和React

redux和react一起结合使用的方法:

1)
因为改变内部 state 惟一方法是 dispatch 一个 action。
所以把store.dispatch的方法传递给组件,使其内部可以调用修改状态
react的修改状态从之前的setState({})变成了由store来统一管理
2)
store.subscribe来监听每次state修改
每次dispatch都会执行订阅的事件
subscribe来定义render函数,每次修改都重新渲染页面。
3)
react和redux的文件分离

index.js中 创建store

订阅subscribe只要状态改变。就重新渲染页面 render()

const store=createStore(couter)

新建store.以组件属性的形式。添加到component组件里

通过subscribe订阅这个render函数,状态有变化。render就会重新渲染页面

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import App from './App';
import { couter,addFn,minusFn } from './index.redux';
import registerServiceWorker from './registerServiceWorker';
const store=createStore(couter)
function render() {
ReactDOM.render(<App store={store} addFn={addFn} minusFn={minusFn}/>, document.getElementById('root'));
}
render()
store.subscribe(render)
registerServiceWorker();

  

新建index.redux.js专门管理redux

存放reducer和 dispatch的action   //store.dispatch({type:'加'});

//通过reducer来建立。
const ADD="加";
const MINUS="减";
export function couter(state=0, action) {
switch (action.type){
case ADD:
return state+1
case MINUS:
return state-1
default:
return 1
}
}
//store.dispatch({type:'加'});store.dispatch({type:'减'})
//action
export function addFn() {
return { type:ADD }
}
export function minusFn() {
return { type:MINUS }
}

 

app.js中使用

内部通过属性获取store以及相应的函数

const store=this.props.store

点击的时候要改变状态 dispatch     //addFn() 执行返回的是对象

import React, { Component } from 'react';
class App extends Component {
constructor(props){
super(props)
}
render() {
const store=this.props.store
const addFn=this.props.addFn
const minusFn=this.props.minusFn
const init=store.getState()
return (
<div className="App">
<h1>你好吗?</h1>
<p>现在的总数是:{init}</p>
<button onClick={ ()=>store.dispatch( addFn() ) }>加1</button>
<button onClick={ ()=>store.dispatch( minusFn() ) }>减1</button>
</div>
);
}
}
export default App;

  

运行结果能实现简单的通过redux管理状态:

 三:redux异步处理   redux-thunk

强制清除缓存 。npm报错。code为408(不允许安装) 这时候执行  npm cache clean --force

处理异步

redux默认情况下只处理同步,想要处理异步,需要上面安装的redux-thunk插件
先引入:
import { createStore ,applyMiddleware } from 'redux';
import thunk from 'redux-thunk'
使用applyMiddleware在创建store的时候开启中间件
const store=createStore(couter ,applyMiddleware(thunk))
之前action是个对象。直接dispatch这个对象就直接修改状态。store.dispatch({type:MINUS})
export function minusFn() {
return { type:MINUS }
}
action可以返回函数,使用dispatch提交action
addAsyn() 这个函数可以返回个函数。
export function addAsyn() {
  return dispatch=>{
    setTimeout(()=>{
      dispatch(addFn())
     },2000)
}
dispatch是个参数。setTimeout结束之后手动执行dispatch

入口:index.js

app.js

index.redux.js

多向外暴露个函数

实现效果:

四:react和redux的结合使用     

插件:react-redux

不适用subscribe发布事件

提供provider和connect两个接口链接react和redux

index.js调整


import React from 'react';
import ReactDOM from 'react-dom';
import { createStore ,applyMiddleware } from 'redux';
import thunk from 'redux-thunk'
import { Provider } from 'react-redux'
import App from './App';
import { couter } from './index.redux';
import registerServiceWorker from './registerServiceWorker';
const store=createStore(couter , applyMiddleware(thunk))
ReactDOM.render(
(<Provider store={store}>
< App />
</Provider>)
, document.getElementById('root'));
registerServiceWorker();

app.js中

connect负责从外部获取组件需要的参数。放到props中

import React, { Component } from 'react';
import { connect } from 'react-redux'
import {addFn,minusFn,addAsyn} from './index.redux'
class App extends Component {
render() {
const num=this.props.num
const addFn=this.props.addFn
const minusFn=this.props.minusFn
const addAsyn=this.props.addAsyn
return (
<div className="App">
<h1>你好吗?</h1>
<p> { num }</p>
<button onClick={addFn}>加1</button>
<button onClick={minusFn}>减1</button>
<button onClick={addAsyn}>异步加1</button>
</div>
);
}
}
//num state状态 映射到属性里面
const mapStatetoProps=(state)=>{
return {num:state}
}
//num 可以通过props获取
const actionCreators={addFn,minusFn,addAsyn}
//addFn 自动有了dispatch的功能 onClick={addFn}
//addFn minusFn minusFn会被映射到props里面
//this.props.addFn 可以通过props获取
App=connect(mapStatetoProps,actionCreators)(App)
export default App;

  


五:@优化

安装插件,配置package.json介绍:http://www.cnblogs.com/kelly2017/p/7930681.html

import { connect } from 'react-redux'
import {addFn,minusFn,addAsyn} from './index.redux'
//num state状态 映射到属性里面
// const mapStatetoProps=(state)=>{
// return {num:state}
// }
//num 可以通过props获取
// const actionCreators={addFn,minusFn,addAsyn}
//addFn 自动有了dispatch的功能 onClick={addFn}
//addFn minusFn minusFn会被映射到props里面
//this.props.addFn 可以通过props获取
//App=connect(mapStatetoProps,actionCreators)(App)
//@connect(mapStatetoProps,actionCreators)
@connect(
(state)=>({num:state}),
//第一个参数,state里的属性放到props里面
{addFn,minusFn,addAsyn}
//方法放到props里
)

  

 六:多个reducer之间的合并问题

新建一个专门用来合并用的reducer.js 主要的合并的方法 combineReducers

//多个reducer之间的合并  并且返回
import {combineReducers} from 'redux'
//redux提供的用于多个reducer合并的方法
// 里面是个对象。罗列需要合并的reducer
import { couter } from './index.redux'; //项目中需要的reducer
import { auth } from './Auth.redux'; //项目中需要的reducer
export default combineReducers({couter,auth})

在index.js中不需要之前引入的单个的reducer.直接引入合并之后的就可以

import reducer from './reducer'
import Dashboard from './Dashboard'
import registerServiceWorker from './registerServiceWorker';
//之前就一个couter reducer 现在加了一个auth reducer
const store=createStore( reducer , applyMiddleware(thunk) )
console.log(store.getState())

  打印结果:合并之后的两个reducer的初始状态。

  

 

 

 

  

redux状态管理和react-redux的结合使用的更多相关文章

  1. React+Redux学习笔记:React+Redux简易开发步骤

    前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...

  2. 【redux】详解react/redux的服务端渲染:页面性能与SEO

        亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染)   react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...

  3. 初学 react | redux

    react | redux 一.安装 React Redux 依赖 React 0.14或更新版本 npm install --sava react-redux 你需要使用 npm 作为包管理工具,配 ...

  4. react+redux教程(二)redux的单一状态树完全替代了react的状态机?

    上篇react+redux教程,我们讲解了官方计数器的代码实现,react+redux教程(一).我们发现我们没有用到react组件本身的state,而是通过props来导入数据和操作的. 我们知道r ...

  5. react之redux状态管理

    1.传统MVC框架的缺陷 模型(model)-视图(view)-控制器(controller)的缩写 V即View视图:用户看到并与之交互的界面. M即Model模型是管理数据:很多业务逻辑都在模型中 ...

  6. Redux状态管理方法与实例

    状态管理是目前构建单页应用中不可或缺的一环,也是值得花时间学习的知识点.React官方推荐我们使用Redux来管理我们的React应用,同时也提供了Redux的文档来供我们学习,中文版地址为http: ...

  7. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  8. react+redux官方实例TODO从最简单的入门(6)-- 完结

    通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...

  9. react+redux官方实例TODO从最简单的入门(1)-- 前言

    刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...

随机推荐

  1. App推广

    一行业常见名词解释 开发商:也叫CP,即Content Provider内容提供商的英文首字母缩写. 发行商(运营商):即代理CP开发出来的产品. 渠道:拥有用户,能够进行流量分发的公司,即可成为渠道 ...

  2. JavaScript中对象的属性类型

    JavaScript中,对象的属性有两种:数据属性和访问器属性. 数据属性 特性: 数据属性包括一个数据值的位置.在这个位置可以读取和写入值.数据属性有4个特性. [[configurable]]:可 ...

  3. 1:django models

    重温django model 1:many-to-many 的额外属性 一般情况下,many-to-many直接就可以满足我们的要求,考虑这样一种情况: 音乐家和乐团是many-to-many的关系, ...

  4. poj-1113

    Wall Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 31419   Accepted: 10619 Descriptio ...

  5. Mybatis学习—入门

    总结自 Mybatis官方中文文档 什么是 MyBatis ? MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手 ...

  6. python字符编码与解码 unicode,str

    解释以下几个问题: (1)python2中str和unicode是两种字符串类型,与字符编码方式是什么关系? (2)str和unicode是怎么相互转换的? (3)'\x...':'\u...', ' ...

  7. 微信小程序~触摸相关事件(拖拽操作、手势识别、多点触控)

    touchstart     手指触摸动作开始 touchmove    手指触摸后移动 touchcancel  手指触摸动作被打断,如来电提醒,弹窗 touchend      手指触摸动作结束 ...

  8. react生命周期函数使用箭头函数,导致mobx-react问题

    最近新人加入了项目,遇到了一个很奇怪的问题.mobx observable 属性,onChange的时候就是页面不会刷新. 试来试去,就是不知道什么原因,后来其他同事查到是因为componentWil ...

  9. 继续ajax长轮询解决方案--递归

    如果使用for,会有一种情况发生,就是ajax的执行会大于其他的动作的执行,那么这样的一段代码就不能实现了 for(var i=0;i<20;i++){ console.log('你好') $. ...

  10. CSS3主要的几个样式笔记

    1.边框:border-color:    设置对象边框的颜色.     使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就可以在这个border上使用X ...