[react] redux react-redux
文章目录
- 1. redux理解
- 1.1. 相关文档
- 1.2. redux是什么
- 1.3. 什么情况下需要使用redux
- 1.4. redux工作流程
- 2. redux的三个核心概念
- 2.1. `action`
- 2.2. `reducer`
- 2.3. `store`
- 3. API
- 3.1. `createStore()`
- 3.2. store对象
- 3.3. `applyMiddleware()`
- 3.4. `combineReducers()`
- 4. 使用redux编写应用
- 4.1 效果
- 4.2 实现
- 4.2.0 只用react写
- 4.2.1 redux精简版
- 4.2.2 redux完整版
- 4.2.3 redux异步action版 使用异步中间件 redux-thunk
- redux版完整code
- 5. react-redux
- 5.1. 理解
- 5.2. react-redux将所有组件分成两大类
- 【补充】函数柯里化
- 5.3 基本使用
- 5.3.0 连接容器组件和UI组件
- 5.3.1 使用 分析:
- 5.3.2 整理版
- 总结:
- 5.4 优化
- 优化1 简写mapDispatchToProps
- 优化2 Provider
- 优化3 整合UI组件和容器组件
- 总结:
- 优化版完整代码
- 5.5 数据共享版
- code图示:
- 总结:
- 6. 使用上redux调试工具
- 6.1 安装chrome浏览器插件
- 6.2 下载工具依赖包
- 7. 纯函数和高阶函数
- 7.1 纯函数
- 7.2 高阶函数
- 8. 最终版 简写版
- code图示版
- code代码版
- index.jsx
- App.js
- containers/Count/index.jsx
- containers/Person/index.jsx
- src/redux/constant.js
- redux/actions/count.js
- redux/action/person.js
- redux/reducers/index.js
- redux/reducers/count.js
- redux/reducers/person.js
- src/redux/store.js
- 效果
- 9. 项目运行打包
1. redux理解
1.1. 相关文档
中文文档: http://www.redux.org.cn/
Github: https://github.com/reactjs/redux
先把它装上
npm i redux
1.2. redux是什么
- redux是一个专门用于做状态管理的JS库(不是react插件库)。
- 可以用在react, angular, vue等项目中, 但基本与react配合使用。
- 作用: 集中式管理react应用中多个组件共享的状态。
1.3. 什么情况下需要使用redux
- 某个组件的状态,需要让其他组件可以随时拿到(共享)
- 一个组件需要改变另一个组件的状态(通信)
- 总体原则:能不用就不用, 如果不用比较吃力才考虑使用
1.4. redux工作流程
2. redux的三个核心概念
2.1. action
- 动作的对象
- 包含 2 个属性
type
:标识属性, 值为字符串, 唯一, 必要属性data
:数据属性, 值类型任意, 可选属性
- 例子:
{ type: 'ADD_STUDENT',data:{name: 'tom',age:18} }
2.2. reducer
- 用于初始化状态、加工状态。
- 加工时,根据旧的state和action, 产生新的state的纯函数。
2.3. store
将
state、action、reducer
联系在一起的对象如何得到此对象?
import {createStore} from 'redux'
import reducer from './reducers'
const store = createStore(reducer)
- 此对象的功能?
getState()
: 得到statedispatch(action)
: 分发action, 触发reducer调用, 产生新的statesubscribe(listener)
: 注册监听, 当产生了新的state时, 自动调用
3. API
3.1. createStore()
作用:创建包含指定reducer
的store
对象
3.2. store对象
- 作用: redux库最核心的管理对象
- 它内部维护着:
state
reducer
- 核心方法:
getState()
dispatch(action)
subscribe(listener)
- 具体编码:
store.getState()
store.dispatch({type:'INCREMENT', number})
store.subscribe(render)
3.3. applyMiddleware()
作用:应用上基于redux的中间件(插件库)
3.4. combineReducers()
作用:合并多个reducer函数
4. 使用redux编写应用
4.1 效果
4.2 实现
4.2.0 只用react写
App.jsx
components/Count/index.jsx
4.2.1 redux精简版
初始值分析:
count_reducer.js
完整代码:
(1).去除Count组件自身的状态
(2).src下建立:
redux
store.js
count_reducer.js
(3).store.js:
1).引入redux
中的createStore
函数,创建一个store
2).createStore
调用时要传入一个为其服务的reducer
3).记得暴露store
对象
(4).count_reducer.js:
1).reducer
的本质是一个函数,接收:preState,action
,返回加工后的状态
2).reducer
有两个作用:初始化状态,加工状态
3).reducer
被第一次调用时,是store
自动触发的,
传递的preState
是undefined
,
传递的action
是:{type:'@@REDUX/INIT_a.2.b.4}
(5).在index.js中监测store中状态的改变,一旦发生改变重新渲染<App/>
备注:redux
只负责管理状态,至于状态的改变驱动着页面的展示,要靠我们自己写。
在index.js中监测store中状态的改变,一旦发生改变重新渲染<App/>
App.jsx
src\redux\store.js
1). 引入redux
中的createStore
函数,创建一个store
2). createStore
调用时要传入一个为其服务的reducer
3). 记得暴露store
对象
src\redux\count_reducer.js
1). reducer
的本质是一个函数,接收:preState,action
,返回加工后的状态
2). reducer
有两个作用:初始化状态,加工状态
3). reducer
被第一次调用时,是store
自动触发的,
传递的preState
是undefined
,
传递的action
是:{type:'@@REDUX/INIT_a.2.b.4}
src\components\Count\index.jsx
4.2.2 redux完整版
完整版新增文件:
count_action.js 专门用于创建action对象
constant.js 放置容易写错的type值
小知识点:
const a=()={return {data:b}
}
简写:
简写:
完整代码:
src\index.js
src\App.jsx
src\redux\constant.js
src\redux\count_action.js
src\redux\count_reducer.js
src\redux\store.js
src\components\Count\index.jsx
4.2.3 redux异步action版 使用异步中间件 redux-thunk
(1).明确:延迟的动作不想交给组件自身,想交给action
(2).何时需要异步action
:想要对状态进行操作,但是具体的数据靠异步任务返回。
(3).具体编码:
- 1).使用异步中间件
yarn add redux-thunk
,并配置在store
中 - 2).创建
action
的函数不再返回一般对象,而是一个函数,该函数中写异步任务。 - 3).异步任务有结果后,分发一个同步的action去真正操作数据。
(4).备注:异步action
不是必须要写的,完全可以自己等待异步任务的结果了再去分发同步action
。
小注意点:
完整代码:
src\index.js
src\App.jsx
src\redux\constant.js
src\redux\count_action.js
src\redux\count_reducer.js
src\redux\store.js
src\components\Count\index.jsx
redux版完整code
src\index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'ReactDOM.render(<App/>,document.getElementById('root'))store.subscribe(()=>{ReactDOM.render(<App/>,document.getElementById('root'))
})
APP.js
import React, { Component } from 'react'
import Count from './components/Count'export default class App extends Component {render() {return (<div><Count/></div>)}
}
constant.js
/* 该模块是用于定义action对象中type类型的常量值,目的只有一个:便于管理的同时防止程序员单词写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
count_action.js
/* 该文件专门为Count组件生成action对象
*/
import {INCREMENT,DECREMENT} from './constant'//同步action,就是指action的值为Object类型的一般对象
export const createIncrementAction = data => ({type:INCREMENT,data})
export const createDecrementAction = data => ({type:DECREMENT,data})//异步action,就是指action的值为函数,异步action中一般都会调用同步action,
// 异步action不是必须要用的。
export const createIncrementAsyncAction = (data,time) => {return (dispatch)=>{setTimeout(()=>{dispatch(createIncrementAction(data))},time)}
}
count_reducer.js
/* 1.该文件是用于创建一个为Count组件服务的reducer,reducer的本质就是一个函数2.reducer函数会接到两个参数,分别为:之前的状态(preState),动作对象(action)
*/
import {INCREMENT,DECREMENT} from './constant'const initState = 0 //初始化状态
export default function countReducer(preState=initState,action){// console.log(preState);//从action对象中获取:type、dataconst {type,data} = action//根据type决定如何加工数据switch (type) {case INCREMENT: //如果是加return preState + datacase DECREMENT: //若果是减return preState - datadefault:return preState}
}
store.js
/* 该文件专门用于暴露一个store对象,整个应用只有一个store对象
*///引入createStore,专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware
} from 'redux'//引入为Count组件服务的reducer
import countReducer from './count_reducer'//引入redux-thunk,用于支持异步action
import thunk from 'redux-thunk'//暴露store
export default createStore(countReducer, applyMiddleware(thunk))
src\components\Count\index.jsx
import React, { Component } from 'react'
//引入store,用于获取redux中保存状态
import store from '../../redux/store'
//引入actionCreator,专门用于创建action对象
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction
} from '../../redux/count_action'export default class Count extends Component {state = {carName:'奔驰c63'}//加法increment = ()=>{const {value} = this.selectNumberstore.dispatch(createIncrementAction(value*1))}//减法decrement = ()=>{const {value} = this.selectNumberstore.dispatch(createDecrementAction(value*1))}//奇数再加incrementIfOdd = ()=>{const {value} = this.selectNumberconst count = store.getState()if(count % 2 !== 0){store.dispatch(createIncrementAction(value*1))}}//异步加incrementAsync = ()=>{const {value} = this.selectNumber// setTimeout(()=>{store.dispatch(createIncrementAsyncAction(value*1,500))// },500)}render() {return (<div><h1>当前求和为:{store.getState()}</h1><select ref={c => this.selectNumber = c}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select> <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button> <button onClick={this.incrementAsync}>异步加</button> </div>)}
}
5. react-redux
5.1. 理解
一个React插件库
专门用来简化React应用中使用redux
5.2. react-redux将所有组件分成两大类
UI组件
- 只负责 UI 的呈现,不带有任何业务逻辑
- 通过props接收数据(一般数据和函数)
- 不使用任何 Redux 的 API
- 一般保存在components文件夹下
容器组件
- 负责管理数据和业务逻辑,不负责UI的呈现
- 使用 Redux 的 API
- 一般保存在containers文件夹下
【补充】函数柯里化
5.3 基本使用
5.3.0 连接容器组件和UI组件
5.3.1 使用 分析:
下面是分析过程,理解用的,可以不看,可以直接跳到最后的写法
5.3.2 整理版
index.js
App.jsx
constant.js
count_action.js
count_reducer.js
store.js
contariners/Count/index.jsx
components/Count/index.js
整体
总结:
(1).明确两个概念:
- 1).UI组件:不能使用任何redux的api,只负责页面的呈现、交互等。
- 2).容器组件:负责和redux通信,将结果交给UI组件。
(2).如何创建一个容器组件————靠react-redux 的 connect函数
connect(mapStateToProps,mapDispatchToProps)(UI组件)
- -mapStateToProps:映射状态,返回值是一个对象
- -mapDispatchToProps:映射操作状态的方法,返回值是一个对象
(3).备注1:容器组件中的store是靠props传进去的,而不是在容器组件中直接引入
(4).备注2:mapDispatchToProps,也可以是一个对象
5.4 优化
优化1 简写mapDispatchToProps
src\containers\Count\index.jsx
下面是分析过程:
原本写法
简写
简写
最终简写
优化2 Provider
容器组件可以检测redux中的状态改变,并渲染页面,所以不需要在index.js中检测了
不要在App.jsx中给子组件传递store了
index.js
容器组件可以检测redux中的状态改变,并渲染页面,所以不需要在index.js中检测了
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'
import {Provider} from 'react-redux'ReactDOM.render(<Provider store={store}><App/></Provider>,document.getElementById('root')
)
App.js
不要在App.jsx中给子组件传递store了
import React, { Component } from 'react'
import Count from './containers/Count'export default class App extends Component {render() {return (<div><Count/></div>)}
}
下面是分析过程:
简写成:
加上Provider
优化3 整合UI组件和容器组件
每个组件两个文件夹太麻烦了,直接整合在一起就好了~
containers/Count/index.jsx
总结:
- 容器组件和UI组件整合一个文件
- 无需自己给容器组件传递store,给
<App/>
包裹一个<Provider store={store}>
即可。 - 使用了react-redux后也不用再自己检测redux中状态的改变了,容器组件可以自动完成这个工作
mapDispatchToProps
也可以简单的写成一个对象- 一个组件要和redux“打交道”要经过哪几步?
- 定义好UI组件—不暴露
- 引入connect生成一个容器组件,并暴露,写法如下:
connect(
state => ({key:value}), //映射状态
{key:xxxxxAction} //映射操作状态的方法
)(UI组件)
- 在UI组件中通过
this.props.xxxxxxx
读取和操作状态
优化版完整代码
src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'
import {Provider} from 'react-redux'ReactDOM.render(<Provider store={store}><App/></Provider>,document.getElementById('root')
)
App.jsx
import React, { Component } from 'react'
import Count from './containers/Count'export default class App extends Component {render() {return (<div><Count/></div>)}
}
src\redux\constant.js
/* 该模块是用于定义action对象中type类型的常量值,目的只有一个:便于管理的同时防止程序员单词写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
src\redux\count_action.js
/* 该文件专门为Count组件生成action对象
*/
import {INCREMENT,DECREMENT} from './constant'//同步action,就是指action的值为Object类型的一般对象
export const createIncrementAction = data => ({type:INCREMENT,data})
export const createDecrementAction = data => ({type:DECREMENT,data})//异步action,就是指action的值为函数,异步action中一般都会调用同步action,异步action不是必须要用的。
export const createIncrementAsyncAction = (data,time) => {return (dispatch)=>{setTimeout(()=>{dispatch(createIncrementAction(data))},time)}
}
src\redux\count_reducer.js
/* 1.该文件是用于创建一个为Count组件服务的reducer,reducer的本质就是一个函数2.reducer函数会接到两个参数,分别为:之前的状态(preState),动作对象(action)
*/
import {INCREMENT,DECREMENT} from './constant'const initState = 0 //初始化状态
export default function countReducer(preState=initState,action){// console.log(preState);//从action对象中获取:type、dataconst {type,data} = action//根据type决定如何加工数据switch (type) {case INCREMENT: //如果是加return preState + datacase DECREMENT: //若果是减return preState - datadefault:return preState}
}
src\redux\store.js
/* 该文件专门用于暴露一个store对象,整个应用只有一个store对象
*///引入createStore,专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer'
//引入redux-thunk,用于支持异步action
import thunk from 'redux-thunk'//暴露store
export default createStore(countReducer,applyMiddleware(thunk))
src\containers\Count\index.jsx
import React, { Component } from 'react'//引入action
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction
} from '../../redux/count_action'//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'//定义UI组件
class Count extends Component {state = {carName:'奔驰c63'}//加法increment = ()=>{const {value} = this.selectNumberthis.props.jia(value*1)}//减法decrement = ()=>{const {value} = this.selectNumberthis.props.jian(value*1)}//奇数再加incrementIfOdd = ()=>{const {value} = this.selectNumberif(this.props.count % 2 !== 0){this.props.jia(value*1)}}//异步加incrementAsync = ()=>{const {value} = this.selectNumberthis.props.jiaAsync(value*1,500)}render() {//console.log('UI组件接收到的props是',this.props);return (<div><h1>当前求和为:{this.props.count}</h1><select ref={c => this.selectNumber = c}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select> <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button> <button onClick={this.incrementAsync}>异步加</button> </div>)}
}//使用connect()()创建并暴露一个Count的容器组件
export default connect(state => ({count:state}),//mapDispatchToProps的简写{jia:createIncrementAction,jian:createDecrementAction,jiaAsync:createIncrementAsyncAction,}
)(Count)
5.5 数据共享版
效果:
code图示:
总结:
(1).定义一个Pserson组件,和Count组件通过redux共享数据。
(2).为Person组件编写:reducer、action,配置constant常量。
(3).重点:Person的reducer和Count的Reducer要使用combineReducers进行合并,
合并后的总状态是一个对象!!!
(4).交给store的是总reducer,最后注意在组件中取出状态的时候,记得“取到位”。
6. 使用上redux调试工具
6.1 安装chrome浏览器插件
Redux Dev Tools
6.2 下载工具依赖包
npm install redux-devtools-extension
在store中进行配置
import {composeWithDevTools} from 'redux-devtools-extension'const store = createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))
7. 纯函数和高阶函数
reducer要求是一个纯函数,所以操作数组的时候,不能用push之类的方法
7.1 纯函数
- 一类特别的函数: 只要是同样的输入(实参),必定得到同样的输出(返回)
- 必须遵守以下一些约束
- 不得改写参数数据
- 不会产生任何副作用,例如网络请求,输入和输出设备
- 不能调用Date.now()或者Math.random()等不纯的方法
- redux的reducer函数必须是一个纯函数
7.2 高阶函数
理解: 一类特别的函数
- 情况1: 参数是函数
- 情况2: 返回是函数
常见的高阶函数:
- 定时器设置函数
- 数组的
forEach()/map()/filter()/reduce()/find()/bind()
promise
react-redux
中的connect
函数
作用: 能实现更加动态, 更加可扩展的功能
8. 最终版 简写版
所有变量名字要规范,尽量触发对象的简写形式。
reducers文件夹中,编写index.js专门用于汇总并暴露所有的reducer
code图示版
code代码版
index.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'
import {Provider} from 'react-redux'ReactDOM.render(/* 此处需要用Provider包裹App,目的是让App所有的后代容器组件都能接收到store */<Provider store={store}><App/></Provider>,document.getElementById('root')
)
App.js
import React, { Component } from 'react'
import Count from './containers/Count' //引入的Count的容器组件
import Person from './containers/Person' //引入的Person的容器组件export default class App extends Component {render() {return (<div><Count/><hr/><Person/></div>)}
}
containers/Count/index.jsx
import React, { Component } from 'react'
//引入action
import { increment, decrement, incrementAsync } from '../../redux/actions/count'//引入connect用于连接UI组件与redux
import { connect } from 'react-redux'//定义UI组件
class Count extends Component {state = { carName: '奔驰c63' }//加法increment = () => {const { value } = this.selectNumberthis.props.increment(value * 1)}//减法decrement = () => {const { value } = this.selectNumberthis.props.decrement(value * 1)}//奇数再加incrementIfOdd = () => {const { value } = this.selectNumberif (this.props.count % 2 !== 0) {this.props.increment(value * 1)}}//异步加incrementAsync = () => {const { value } = this.selectNumberthis.props.incrementAsync(value * 1, 500)}render() {//console.log('UI组件接收到的props是',this.props);return (<div><h2>我是Count组件,下方组件总人数为:{this.props.personCount}</h2><h4>当前求和为:{this.props.count}</h4><select ref={c => this.selectNumber = c}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select> <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button> <button onClick={this.incrementAsync}>异步加</button> </div>)}
}//使用connect()()创建并暴露一个Count的容器组件
export default connect(state => ({count: state.count,personCount: state.persons.length}),{increment,decrement,incrementAsync}
)(Count)
containers/Person/index.jsx
import React, { Component } from 'react'
import { nanoid } from 'nanoid'
import { connect } from 'react-redux'
import { addPerson } from '../../redux/actions/person'class Person extends Component {addPerson = () => {const name = this.nameNode.valueconst age = this.ageNode.value * 1const personObj = { id: nanoid(), name, age }this.props.addPerson(personObj)this.nameNode.value = ''this.ageNode.value = ''}render() {return (<div><h2>我是Person组件,上方组件求和为{this.props.count}</h2><input ref={c => this.nameNode = c} type="text" placeholder="输入名字" /><input ref={c => this.ageNode = c} type="text" placeholder="输入年龄" /><button onClick={this.addPerson}>添加</button><ul>{this.props.persons.map((p) => {return <li key={p.id}>{p.name}--{p.age}</li>})}</ul></div>)}
}export default connect(state => ({persons: state.persons,count: state.count}),//映射状态{ addPerson }//映射操作状态的方法
)(Person)
src/redux/constant.js
/* 该模块是用于定义action对象中type类型的常量值,目的只有一个:便于管理的同时防止程序员单词写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
export const ADD_PERSON = 'add_person'
redux/actions/count.js
/* 该文件专门为Count组件生成action对象
*/
import { INCREMENT, DECREMENT } from "../constant";//同步action,就是指action的值为Object类型的一般对象
export const increment = (data) => ({ type: INCREMENT, data });
export const decrement = (data) => ({ type: DECREMENT, data });//异步action,就是指action的值为函数,异步action中一般都会调用同步action,异步action不是必须要用的。
export const incrementAsync = (data, time) => {return (dispatch) => {setTimeout(() => {dispatch(increment(data));}, time);};
};
redux/action/person.js
import { ADD_PERSON} from '../constant'//创建增加一个人的action动作对象
export const addPerson = personObj => ({type: ADD_PERSON,data: personObj
})
redux/reducers/index.js
/* 该文件用于汇总所有的reducer为一个总的reducer
*/
//引入combineReducers,用于汇总多个reducer
import {combineReducers} from 'redux'//引入为Count组件服务的reducer
import count from './count'//引入为Person组件服务的reducer
import persons from './person'//汇总所有的reducer变为一个总的reducer
export default combineReducers({count,persons
})
redux/reducers/count.js
/* 1.该文件是用于创建一个为Count组件服务的reducer,reducer的本质就是一个函数2.reducer函数会接到两个参数,分别为:之前的状态(preState),动作对象(action)
*/
import {INCREMENT,DECREMENT} from '../constant'const initState = 0 //初始化状态export default function countReducer(preState=initState,action){//从action对象中获取:type、dataconst {type,data} = action//根据type决定如何加工数据switch (type) {case INCREMENT: //如果是加return preState + datacase DECREMENT: //若果是减return preState - datadefault:return preState}
}
redux/reducers/person.js
import {ADD_PERSON} from '../constant'//初始化人的列表
const initState = [{id:'001',name:'tom',age:18}]export default function personReducer(preState=initState,action){const {type,data} = actionswitch (type) {case ADD_PERSON: //若是添加一个人//此处不能这样写,这样会导致preState被改写了,personReducer就不是纯函数了。//preState.unshift(data) return [data,...preState]default:return preState}
}
src/redux/store.js
/* 该文件专门用于暴露一个store对象,整个应用只有一个store对象
*///引入createStore,专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware} from 'redux'//引入汇总之后的reducer
import reducer from './reducers'//引入redux-thunk,用于支持异步action
import thunk from 'redux-thunk'//引入redux-devtools-extension
import {composeWithDevTools} from 'redux-devtools-extension'//暴露store
export default createStore(reducer,composeWithDevTools(applyMiddleware(thunk)))
效果
9. 项目运行打包
npm run build
全局安装serve
npm i serve -g
运行
serve -s build
或者:
serve build
参考:
【React】redux - 三大核心概念 - action - reducer - store - 异步编程 - react-redux - 调试工具 - 纯函数 - 高阶函数
[react] ref 的常用方法 获取input的值
[react] redux react-redux相关推荐
- Flux -- Redux -- Redux React 基础实例教程
本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...
- React native 项目进阶(redux, redux saga, redux logger)
之前利用知乎日报的api写了react-native的一个入门项目,传送文章地址React Native 项目入门和源码地址RN入门项目源码,目前github上的代码已经在原文的基础上增加了新的功能, ...
- React入门-9.redux你好
Redux入门 1. 介绍 redux是js的状态管理机制,与vuex类似,不过vuex是为vue定制的.而redux并非仅仅服务于react,在jquery,angular,甚至于原生的js中都可以 ...
- Flux --gt; Redux --gt; Redux React 入门 基础实例教程
本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...
- react-redux图解_如何将React连接到Redux —图解指南
react-redux图解 by Princiya 由Princiya 如何将React连接到Redux -图解指南 (How to connect React to Redux - a diagra ...
- React Native集成Redux框架讲解与应用
学过React Native的都知道,RN的UI是根据相应组件的state进行render的,而页面又是由大大小小的组件构成,导致每个组件都必须维护自身的一套状态,因此当页面复杂化的时候,管理stat ...
- 函数式编程在Redux/React中的应用
本文简述了软件复杂度问题及应对策略:抽象和组合:展示了抽象和组合在函数式编程中的应用:并展示了Redux/React在解决前端状态管理的复杂度方面对上述理论的实践.这其中包括了一段有趣的Redux推导 ...
- React Suspense提供Redux的替代方案
React 16.6引入了Suspense,它能够在某些时候(比如通过API调用获取数据)暂停渲染并展现一个加载中的指示器. 在常见的简单场景中,React Suspense消除了使用Redux的必要 ...
- Router入门0x205: react-route + redux + react 集成
0x000 概述 这一章终于大集成了 0x001 集成react 源码 import React from 'react' import ReactDom from 'react-dom'class ...
- RxJS + Redux + React = Amazing!(译二)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...
最新文章
- IOS开发CALayer隐式动画
- 图片裁剪功能学习小结
- sql server 补齐0学习总结
- Understanding Design And Development Job Titles--reference
- 【转】自旋锁及其衍生锁
- Java中的中介器设计模式-示例教程
- mouseover/out和mouseenter/leave的区别及用法
- Windows Phone 8.1 应用商店将于 12 月 16 日关闭
- 苹果手机如何调节屏幕彩色(对于百度提供的方式行不通时此方法必有用)
- Node.js:express设置全局变量
- 影响力在职场的重要性
- 为个人博客添加文章评论功能
- 基金会要申请银行账户吗
- 给一整型变量a,写两段代码,第一个设置a的bit3,第二个清除a的bit3.“a的bit3”
- Django 指定目录创建app
- EndNote X9 插件在word中的使用以及中文引用格式问题
- DiskGenius 5.4.6.1441 Portable
- 学习使用php实现生成模糊图片的方法类整理
- 宝藏级的开源小程序(APP)商城-CRMEB-WEB版实测
- c++学习笔记(七、异常和I/O)