indexroute是默认路由
const history = synchistorywithstore(browserhistory, store)
用synchistorywithstore是为了让react-router 的 history 跟 store 互相同步
包括增加❤️,增加评论,删除评论
combinereducers 把一个由多个不同 reducer 函数作为 value 的 object,合并成一个最终的 reducer 函数,然后就可以对这个 reducer 调用 createstore 方法。
为了让router与redux保持一致,要把routereducer加进来,必须是routing,不是routing会报错。
const rootreducer = combinereducers({posts, comments, routing: routerreducer });
<provider store={store}> <router history={history}> </router> </provider>
const app = connect(mapstatetoprops, mapdispachtoprops)(main);
// post reducer function posts(state = [], action) { switch(action.type) { case 'increment_likes' : console.log("incrementing likes!!"); const i = action.index; return [ ...state.slice(0,i), // before the one we are updating {...state[i], likes: state[i].likes + 1}, ...state.slice(i + 1), // after the one we are updating ] default: return state; } }
function postcomments(state = [], action) { switch(action.type){ case 'add_comment': // return the new state with the new comment return [...state,{ user: action.author, text: action.comment }]; case 'remove_comment': // we need to return the new state without the deleted comment return [ // from the start to the one we want to delete ...state.slice(0,action.i), // after the deleted one, to the end ...state.slice(action.i + 1) ] default: return state; } return state; }
一个项目做下来,对redux跟react-redux的使用更加熟悉了,发现redux对于组件间的数据管理真的是很有效果的
github地址:xiaoyuqinginstagram, 喜欢的话动动手指点点赞^-^
如对本文有疑问, 点击进行留言回复!!
使用纯前端JavaScript实现Excel导入导出方法过程详解
微信小程序完美解决scroll-view高度自适应问题的方法
bootstrap-closable-tab可实现关闭的tab标签页插件
网友评论