redux是什么？
我所理解的redux一种数据流框架，专门用来管理数据的，而非传统的库或者框架。
redux使用的场景？
从具体的使用场景来看
* 用户的使用方式比较复杂
* 用户的身份不同（管路员和普通用户）
* 用户之间可以相互协作
* 与服务器有大量的交互
* view要从多个来源获取数据
从组件角度来看
* 某个组件的状态需要被共享
* 某个状态需要在任何地方都可以拿到
* 一个组件需要改变全局状态
* 一个组件需要改变另一个组件的状态
加减按钮的栗子
手动链接react和redux
App.js
import React from 'react'
import { createStore,applyMiddleware } from 'redux'
import ReactDom from 'react-dom'
import thunk from 'redux-thunk'
import {add,reduce,reducer,addAsync} from './redux'
import Show form './index'
// store 是用来保存数据的仓库，一个应用只有一个store
// applyMiddleware用来添加中间件
// thunk 是一个redux 处理异步的中间件
const store = createStore(reducer,apllyMiddleware(thunk))
class App extends React.Component{
render(
return <Show store={store} add={add} reduce={reduce} addAsync={addAsync} />
)
}
function render(){
ReactDom.render(<App />,document.getElementById('root'))
}
render()
//监听store的改变重新渲染
store.subscribe(render)
redux.js
const Add = 'add'
const Reduce = 'reduce'
// store 在接收到dispatch派发的action,会返回一个新的state,这个计算叫做reducer
export function reducer(state=0,action){
switch(action.type){
case Add: return state + 1;
case Reduce: return state - 1;
default: return 10;
}
}
//View 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator。
//View层发出一个Action表示state应该改变了，type属性是必须的
export function add(){
return {
type: Add
}
}
export function reduce(){
return {
type: Reduce
}
}
export function addAsync(){
return (dispatch)={
setTimeout(function(){
dispatch(
{
type: Add
}
)
},1000)
}
}
index.js
import React from 'react'
class Show extends React.Component{
const store = this.props.store
const reduce = this.props.reduce
const add = this.props.reduce
const addAsync = this.props.addAsync
//获取当前store的快照
const num = store.getState()
render(){
return
<div>
<h2>{num}<h2>
<button
onClick={()=>{
//store.dispatch()是 View 发出 Action 的唯一方法。
store.dispatch(add())
}}
>+</button>
<button
onClick={()=>{
store.dispatch(reduce())
}}
>-</button>
<button
onClick={()=>{
store.dispatch(addAsync())
}}
>延时1秒加一</button>
</div>
}
}
export default Show
手动链接react和redux需要传递store容易陷入属性传递的陷阱react-redux建立链接
- Provider组件在应用最外层，传入store即可，只用一次
- Connect负责外部获取组件需要的参数
App.js
import React from 'react'
import { createStore,applyMiddleware } from 'redux'
import ReactDom from 'react-dom'
import { Provider } from 'redux-thunk'
import thunk from 'redux-thunk'
import { reducer } from './redux'
import Show form './index'
// store 是用来保存数据的仓库，一个应用只有一个store
// applyMiddleware用来添加中间件
// thunk 是一个redux 处理异步的中间件
const store = createStore(reducer,apllyMiddleware(thunk))
class App extends React.Component{
render(
return <Show />
)
}
ReactDom.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'))
redux.js
const Add = 'add'
const Reduce = 'reduce'
// store 在接收到dispatch派发的action,会返回一个新的state,这个计算叫做reducer
export function reducer(state=0,action){
switch(action.type){
case Add: return state + 1;
case Reduce: return state - 1;
default: return 10;
}
}
//View 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator。
//View层发出一个Action表示state应该改变了，type属性是必须的
export function add(){
return {
type: Add
}
}
export function reduce(){
return {
type: Reduce
}
}
export function addAsync(){
return (dispatch)={
setTimeout(function(){
dispatch(
{
type: Add
}
)
},1000)
}
}
index.js
import React from 'react'
import connect from 'react-redux'
import {add,reduce,addAsync} from './redux'
class Show extends React.Component{
render(){
return
<div>
<h2>{this.props.num}<h2>
<button
onClick={()=>{
//你需要什么方法,它自动dispatch
this.props.add
}}
>+</button>
<button
onClick={()=>{
this.props.reduce
}}
>-</button>
<button
onClick={()=>{
this.props.addAsync
}}
>延时1秒加一</button>
</div>
}
}
function mapStatetoProps(state){
return { num: state }
}
const actionCreators = { add,reduce,addAsync }
export default connect(mapStatetoProps,actionCreators)(Show)