redux入门实例

最新推荐文章于 2020-10-08 10:41:10 发布

weixin_33814685

最新推荐文章于 2020-10-08 10:41:10 发布

阅读量74

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/tongjh/blog/831573

版权

安装

npm install --save redux
npm install --save react-redux
npm install --save-dev redux-devtools

上面的三个命令分别安装了redux库、React绑定库和开发者工具

基本使用

一个简单的例子

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux'

//reducer函数，用于变更状态容器中的状态
const reducer = (state=0,action) =>{
	switch(action.type){
		case 'INCREMENT':return state+1;
		case 'DECREMENT':return state-1;
		default: return state;
	}
}

//使用createStore创建store
const store = createStore(reducer);

//可以在组件中使用store.dispatch调用相关的action
const render = () =>{
	ReactDOM.render(
		<div>
			<h1>{store.getState()}</h1>
			<button onClick={()=>store.dispatch({type:'INCREMENT'})}>+</button>
			<button onClick={()=>store.dispatch({type:'DECREMENT'})}>-</button>
		</div>
	, document.getElementById('app'))
}

//设置监听函数，State一旦有变化，Store就会调用监听函数，这时就会触发重新渲染View
store.subscribe(render)
render();

上面例子中的代码逻辑大致如下