前端之家收集整理的这篇文章主要介绍了
前端那些事之react--redux篇,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
react-redux
- 下载:npm install --save react-redux
-
npm install --save redux
一个简易的redux的实现
流程如下
import React from 'react';
import {Provider,connect} from 'react-redux'
import {createStore,combineReducers} from 'redux'
const todo = function (state,active) {
switch (active.type) {
}
return {
name: 'todo-mvc',items: [{name: 'aa',active: false},{name: 'bbb',active: true}]
}
}
const fs = (state,active) => {
switch (active.type) {
}
return {
name: 'todo-mvc',folder: false,ext: '.txt'},folder: true,ext: ''}]
}
}
//合并redux
const reduce = combineReducers({
todo,fs
})
//创建全局的redux
const store = createStore(reduce);
const A = React.createClass({
render(){
const {name,items} =this.props;
const nodes=items.map((obj,i)=>{
// console.log(obj.name);
return (
<p key={i}>{obj.name}</p>
)
})
return (
<div>
{nodes}
</div>
)
}
})
//给store赋值属性的涵数
var fn1= (store)=>{
return {
name:store.todo.name,items:store.todo.items
}
}
//连接器connext,连接store和视图之间的关系
const App=connect(fn1)(A);
const ReduxStudy = React.createClass({
render(){
return (
<div>
<Provider store={store}>
<App/>
</Provider>
</div>
)
}
})
export default ReduxStudy;