Redux 是 JavaScript 状态容器,提供可预测化的状态管理。
官方文档:http://cn.redux.js.org//index.html#
要点(官方):应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。
惟一改变 state 的办法是触发 action,一个描述发生什么的对象。
为了描述 action 如何改变 state 树,你需要编写 reducers。
示例:
点击Add Age 年龄加一,点击Sub Age 年龄减一, 第三行输入名字,点击提交,第一行名字改变。
示例非常简单,没有涉及到redux中的所有功能,只是一个redux的使用流程。
目录结构为:
步骤: 1.配置webpack。
2.编写网页显示信息,在container中创建组件。
(1)根组件index.js,是所有其它组件的父组件
import React, { Component, PropTypes } from 'react' import Name from './name.js' import Age from './age.js' import Form from './form.js' var App = React.createClass({ render() { return ( <div> <Name /> <Age /> <Form /> </div> ) } }); export default App;
(2)Name组件,输出为My name is XXX 。 其中XXX为变化的状态
使用connect把整个的State转换为props传递给Name组件
其中用到了dispatch。dispatch属于react-redux,但是在有效组件中使用this.props.dispatch就能获取。作用是可以分发action,从而触发reducer改变State。
import React, { Component, PropTypes } from 'react' import { connect } from 'react-redux' var Name = React.createClass({ render() { const { name } = this.props; return ( <div> My name is <i>{name}</i> . </div> ); } }); Name.PropType = { name: PropTypes.string.isRequired }; function select(state) { return { name: state.inputInfo.name } } export default connect(select)(Name);
(3)Age组件,输出 I am X years old this year. 并提供年龄更改的按钮。
和Name一样,用connect连接。
import React, { Component, PropTypes } from 'react' import { clickAdd, clickSub } from '../action/changeAge.js' import { connect } from 'react-redux' var Age = React.createClass({ render() { const { age } = this.props; return ( <div> I am {age} years old this year . <button onClick={this.clickAdd}>Add Age</button> <button onClick={this.clickSub}>Sub Age</button> </div> ); }, clickSub(event) { this.props.dispatch(clickSub()); }, clickAdd(event) { this.props.dispatch(clickAdd()); } }); Age.PropTypes = { age: PropTypes.string.isRequired }; function select(state) { return { age: state.changeAge } } export default connect(select)(Age);
(4)Form组件,提供输入框和确定按钮。提供把输入的字符传入到Name组件中的功能
import React, { Component, PropTypes } from 'react' import { inputInfo } from '../action/inputInfo.js' import { connect } from 'react-redux' var Form = React.createClass({ render() { return ( <div> <input type="text" placeholder="name" id="nameInput" /> <button onClick={ this.clickSubmit }>提交</button> </div> ); }, clickSubmit(event) { var name = document.getElementById('nameInput').value; console.log(name); this.props.dispatch(inputInfo(name)); } }); export default connect()(Form);
3, 编写Action目录下的内容。根据创建的组件代码可知,需要改变状态的有三个:年龄加一,年龄减一,更改姓名。年龄加一和减一改变的都是Age中属性。所有创建两个文件changeAge.js和inputInfo.js,分别代表年龄更改和输入姓名。代码如下:
//changeAge export const CLICK_ADD = 'CLICK_ADD'; export const CLICK_SUB = 'CLICK_SUB'; export function clickAdd() { return { type: CLICK_ADD } } export function clickSub() { return { type: CLICK_SUB } }
//inputInfo export const INPUT_INFO = "INPUT_INFO"; export function inputInfo(name) { return { type: INPUT_INFO, name } }
4,编写reducer。指明发生某个Action之后需要做的事。同样按照action目录分为两个文件,代码如下:
//changeAge.js import { CLICK_ADD, CLICK_SUB } from '../action/changeAge.js' function initialState() { return 20; } function changeAge(state=initialState(), action) { var value; switch(action.type) { case CLICK_ADD: { value = state + 1; return value } case CLICK_SUB: { value = state - 1; return value } default :{ return state } } } export default changeAge;
//inputInfo.js import { INPUT_INFO } from '../action/inputInfo.js' function initialState() { return { name: "LiMing" } } function inputInfo(state=initialState(), action) { switch (action.type) { case INPUT_INFO: { return { name: action.name } } default : return state; } } export default inputInfo;
创建好两个文件,再创建一个index文件,建立一个rootReducer,用来把刚刚创建的两个Reducer合并为一个。其中用到了combineReducers管理这两个Reducer。
import changeAge from './changeAge.js' import inputInfo from './inputInfo.js' import { combineReducers } from 'redux' const rootReducer = combineReducers( { changeAge, inputInfo } ); export default rootReducer;
5,创建store。每个程序只能有一个store,可以根据已有的Reducer来创建store
import { createStore } from 'redux' import rootReducer from '../reducer/index.js' const store = createStore(rootReducer); export default store;
6,编写最外部的index.js,引入store。其中用到了Provider,可以保存store给子组件中的connect使用。
import App from './container/index.js' import React from 'react' import { render } from 'react-dom' import { Provider } from 'react-redux' import store from './store/index.js' render( <div> <Provider store={store} > <App /> </Provider> </div>, document.getElementById('content') );
OK!!!
相关推荐
react-redux-demo
npm install 安装, npm run server 启动,这个资源是一个简单的react-redux搭建的demo。详细搭建步骤可以参考https://blog.csdn.net/qq_40621718/article/details/80170368
前端项目-react-redux-form,Create Forms Easily with React and Redux
1. React(react18)中组件通信01——props. 2. React(react18)中组件通信02——消息订阅与发布、取消订阅以及卸载组件时取消订阅. ...7. React(react18)中组件通信06——react-redux + redux- toolkit
一个使用redux的简单react native示例
react-redux-material_ui-boilerplate, 反应 Redux 材质用户界面 ES6语法应用样板 react-redux-material_ui-boilerplateReact Redux 材质用户界面 ES6语法应用程序的样板。 这里样板包括以下工具和框架:响应错误...
react-redux-starter-kit, 享受反应,Redux和反应路由器,具有零生成配置 react-redux-starter-kit这是另一个使用反应的页面web应用。 但是,这个项目尝试平衡实际"有用的东西"实际应用程序的简单性。 它演示了身份...
react-redux-notification在你的React-Redux应中用最简单的方式实现通知系统
react和react-redux之间的关系,redux基础知识总结,自己笔记
前端:react-redux 中 Count 组件与 Person 组件数据共享案例. (1)定义一个 Pserson 组件,和 Count 组件通过 redux 共享数据。 (2)为 Person 组件编写:reducer、action,配置 constant 常量。 (3)重点...
react-redux Redux-Saga 一成不变的 React路由器域 react-router-redux devDependencies: 随行(根据Airbnb规则) 预先提交 快速开始 1.克隆项目 # with SSH git clone git@github....
有几个与此回购相关的项目。 这是这些的索引。 react-react-redux v5-alpha(此存储库):具有useMutableSource的实验性react-redux绑定。... :一个将useTrackedState添加到官方react-redux库的拉取请求。 :这是
react-notification-system-redux, 用于响应通知系统的Redux包装器 react-notification-system-redux将 react-notification-system插件包装到组件中,并公开操作和减速器。公开的公关捐赠 !演示&示例现场演示: gor...
资源名称:一步一步创建-React-Redux-应用指南内容简介:Redux已经成为了创建React应用的事实标准,并且有很多示例展示,但是React_Redux应用有很多部分,像Reducer,action creator,state、middleware等等。...
Atom-react-native-redux-snippets-es6-es7-atom.zip,用于react native、react、redux和用于atom编辑器的es6/es7的代码段库react-native-redux-snippets-es6-es7-atom,atom是一个用web技术构建的开源文本编辑器。
React-Redux-Crud 用于管理博客帖子的示例CRUD应用程序。 在客户端使用 , 和构建。 REST API服务器是使用生成的,并在运行时使用内存数据库(将模型保存在平面db.json文件中)。如何安装git clone git@github....
react-redux-antd-starter, 一个反应 Redux Ant 设计前端样板文件 react-redux-antd-starter一个反应 Redux ant设计前端样板文件。反作用力Redux蚂蚁设计反应路由器反应路由器 ReduxRedux操作BabelPostCSS较少CSS...
react-redux实现点击添加购物车,购物车数量总数显示。
一个全功能的 React.js 应用 demo 或模板 # 安装依赖 yarn # 代码检查 npm run lint # 代码检查并自动修复 npm run fix # 本地开发 npm run dev # 生产构建 npm run build # 代码分析 npm run analyze
react-redux-form - 利用Redux轻松在React中创建表单