本教程總共6篇,每日更新一篇,請(qǐng)關(guān)注我們!你可以進(jìn)入歷史消息查看以往文章,也敬請(qǐng)期待我們的新文章!
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著榴、首先復(fù)制一份redux2?到?redux3中博脑，并修改路由
redux->Index.jsx
import Reactfrom 'react';
import {HashRouter, Route, NavLink, Redirect}from 'react-router-dom';
import Redux1 from './redux1/Index'
import Redux2 from './redux2/Index'
import Redux3 from './redux3/Index'
const Index = ({match}) =>
? ? ? ? ? ?
? ? ? ? ? ? ? ?Redux1
? ? ? ? ? ? ? ?Redux2
? ? ? ? ? ? ? ?Redux3
render={() => ()}/>
? ? ? ? ? ?
? ? ? ? ? ?
? ? ? ? ? ?
;
export default Index;
2憎乙、修改業(yè)務(wù)代碼，redux3->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}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?onClick={() =>this.props.dispatch({
type:'EDIT', obj: {
id: data.id,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?status: data.status ===1 ?0 :1
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
})}
className={data.status ===1 ?"del" :"recovery"}>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{data.status ===1 ?"刪除" :"恢復(fù)"}
? ? ? ? ? ? ? ? ? ?)
}
? ? ? ?);
? ?}
}
const mapStateToProps = state => ({storeState: state});
const Main =connect(
mapStateToProps
)(Index);
export default () =>
;
3叉趣、修改?reducer.js
export default (state = {
list: []
}, action) => {
let list = state.list;
? ?switch (action.type) {
case 'ADD':
if (!action.title) {
alert('不能為空');
? ? ? ? ? ? ? ?return state;
? ? ? ? ? ?}
list.push({id: state.list.length +1, title: action.title, status:1});
? ? ? ? ? ?return {list};
? ? ? ?case 'EDIT':
let {id,status} = action.obj;
? ? ? ? ? ?list.find(data => data.id ===id).status =status;
? ? ? ? ? ?return {list};
? ? ? ?default:
return state;
? ?}
};
4泞边、查看瀏覽器
本文完
禁止擅自轉(zhuǎn)載,如需轉(zhuǎn)載請(qǐng)?jiān)诠娞?hào)中留言聯(lián)系我們!
感謝童鞋們支持!
如果你有什么問題,可以在下方留言給我們!
