本教程總共6篇,每日更新一篇,請關(guān)注我們!你可以進(jìn)入歷史消息查看以往文章,也敬請期待我們的新文章!
1、React第三方組件5(狀態(tài)管理之Redux的使用①簡單使用)---2018.03.20
2儡毕、React第三方組件5(狀態(tài)管理之Redux的使用②TodoList上)---2018.03.21
3也切、React第三方組件5(狀態(tài)管理之Redux的使用③TodoList中)---2018.03.22
4、React第三方組件5(狀態(tài)管理之Redux的使用④TodoList下)---2018.03.23
5腰湾、React第三方組件5(狀態(tài)管理之Redux的使用⑤異步操作)---2018.03.26
6雷恃、React第三方組件5(狀態(tài)管理之Redux的使用⑥Redux DevTools)---2018.03.27
開發(fā)環(huán)境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
1、先把redux1復(fù)制一份為redux2费坊，并在路由里添加
import Reactfrom 'react';
import {HashRouter, Route, NavLink, Redirect}from 'react-router-dom';
import Redux1 from './redux1/Index'
import Redux2 from './redux2/Index'
const Index = ({match}) =>
? ? ? ? ? ? ? ?Redux1
? ? ? ? ? ? ? ?Redux2
render={() => ()}/>
;
export default Index;
2倒槐、編寫業(yè)務(wù)代碼? redux2 -> Index.jsx
import Reactfrom 'react';
import {createStore}from 'redux';
import {Provider, connect}from 'react-redux';
import reducer from './reducer'
const store = createStore(reducer);
class Indexextends React.Component {
render() {
return (
? ? ? ? ? ? ? ?this.props.dispatch({type:'ADD', title:this.refs['todoInput'].value})}>添加
? ? ? ? ? ? ? ?{
this.props.storeState.list.map(data =>
{data.title}
)
}
? ? ? ?);
? ?}
}
const mapStateToProps = state => ({storeState: state});
const Main =connect(
mapStateToProps
)(Index);
export default () =>
;
3.修改reducer.js
export default (state = {
list: []
}, action)=> {
switch (action.type) {
/*業(yè)務(wù)模型判斷*/
? ? ? ?case 'ADD':
if (!action.title) {
alert('不能為空');
? ? ? ? ? ? ? ?return state;
? ? ? ? ? ?}
let list = state.list;
? ? ? ? ? ?list.push({id: state.list.length +1, title: action.title, status:1});
? ? ? ? ? ?return {list};
? ? ? ?default:
return state;
? ?}
};
4、看下瀏覽器效果
文完
禁止擅自轉(zhuǎn)載,如需轉(zhuǎn)載請在公眾號中留言聯(lián)系我們!
感謝童鞋們支持!
如果你有什么問題,可以在下方留言給我們!
