redux入门实例

红太狼 2021-04-13 17:29 579阅读 0赞

## 安装 ##

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();

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

1.  先定义reducer
2.  调用createStore创建store
3.  最后在事件中dispatch相关的action

对应到具体业务中的过程是这样的

1.  用户点击某个按钮
2.  然后状态容器diapatch这个action
3.  action最后传达到reducer中
4.  reducer根据action的内容来修改状态
5.  状态容器状态发生改变后触发视图更新

理解了上面的DEMO代码后，Redux基本上就算入门了

发表评论取消回复

表情：

评论列表（有 0 条评论，579人围观）

还没有评论，来说两句吧...

相关阅读

相关 Flux --> Redux --> Redux React 入门基础实例使用

本文的目的很简单，介绍Redux相关概念用法及其在React项目中的基本使用 > 假设你会一些ES6、会一些React、有看过Redux相关的文章，这篇入门小文应该能

一时失言乱红尘/ 2022年07月11日 08:44/ 0 赞/ 216 阅读

相关 Redux入门笔记

附上阮一峰大神教程传送门： [http://www.ruanyifeng.com/blog/2016/09/redux\_tutorial\_part\_one\_basi

古城微笑少年丶/ 2022年06月13日 11:14/ 0 赞/ 232 阅读

相关 Redux之react-redux简单项目入门

一：效果图 ![70][] 二：目录结构注意：已经安装了react官方脚手架（进行修改） ![70 1][] 三：相关代码

一时失言乱红尘/ 2022年05月20日 02:05/ 0 赞/ 208 阅读

相关 REDUX入门

redux基础教程阅读本文之前，你需要掌握一些基本的react知识，和node的基本环境。什么是redux? 简单来说，redux就是

朴灿烈づ我的快乐病毒、/ 2022年05月19日 09:44/ 0 赞/ 222 阅读

相关 redux入门

初识redux 什么是redux Redux是一个流行的JavaScript框架，为应用程序提供一个可预测的状态容器。在React中，数据在组件中是单向流动的，数据

女爷i/ 2021年12月03日 07:39/ 0 赞/ 291 阅读

相关 react-redux入门

文章目录概念 Provider connect mapStateToProps 参数 st

系统管理员/ 2021年11月18日 00:04/ 0 赞/ 352 阅读

相关 Redux入门

文章目录概念工作流程 Action Reducer store store的创建概念 React作为

快来打我*/ 2021年11月17日 10:26/ 0 赞/ 352 阅读

相关 Redux 入门教程—14异步和 redux-thunk

我们在项目经常要发送ajax，处理异步等，这个也可以使用中间件第一步：安装 ![2019081311113789.png][] 第二步：使用 ![watermark

小灰灰/ 2021年11月02日 09:12/ 0 赞/ 382 阅读

相关 Redux 入门教程—13redux-logger

现在我们可以使用别人写好的中间件，这节使用一个关于打印日志的中间件redux-logger 如何使用？第一步：安装 ![20190813105258526.png][]

ゝ一世哀愁。/ 2021年11月02日 09:08/ 0 赞/ 578 阅读

相关 redux入门实例

安装 npm install --save redux npm install --save react-redux npm install --save-dev red...

红太狼/ 2021年04月13日 17:29/ 0 赞/ 580 阅读