1: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管理状态:
3:处理异步
redux默认情况下只处理同步,想要处理异步,需要上面安装的redux-thunk中间件
使用applyMiddleware开启中间件
action可以返回函数,使用dispatch提交action