redux 快速上手,详细使用源码

redux 是什么框架都可以用的,使用步骤
1 cnpm install redux --save
import {createStore, combineReducers} from 'redux' //引入redux 里面的方法
import UserInfo from './userInfo'  //引入创建模块
import List from './list'   //引入创建模块
const rootReducer = combineReducers({  
userInfo: UserInfo,
list: List
});
const store = createStore(rootReducer, {});
export default store; // 暴露出去
创建两个模块,其中一个模块内容如下
export default function (state, action){
console.log('userInfo模块执行了');
console.log(state, action);
//初始化userInfo的数据
if(!state){
return {
name: '张三',
age: 0
}
}
//修改名字事件
if(action.type == 'modify-name'){
return Object.assign(state, {name: action.value});
}
else{
return state;
}
}
 
然后在页面操作
// 获取数据
<p>{store.getState().name}</p>
modifyName(){
let name = this.refs.name.value;
// 修改数据的方法,出发action
store.dispatch({
type: 'modify-name',
value: name
})
}
addItem(){
let item = this.refs.item.value;
store.dispatch({
type: 'add-item',
value: item
})
}

}

猜你喜欢

转载自www.cnblogs.com/jusonhtml5/p/redux.html