首页 > 代码库 > redux
redux
1.声明action常量 export const INCREASE = ‘INCREASE‘ export const GETSUCCESS = ‘GETSUCCESS‘ 2.初始化state数据 const initialState = { number: 1, lists: [ { text: ‘ww整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。‘ }, ], data: [] } 3.通过dispatch action进入 export default function update(state = initialState, action) { // 根据不同的action type进行state的更新 switch (action.type) { case INCREASE: return Object.assign({}, state, { number: state.number + action.amount }) break case GETSUCCESS: return Object.assign({}, state, { data: action.json }) default: return state } } 4.返回一个action对象 export const increase = n = > { return { type: INCREASE, amount: n } } export const getSuccess = (json) = > { return { type: GETSUCCESS, json } } function fetchPosts() { return dispatch = > { return fetch(‘data.json‘) .then((res) = > { console.log(res.status); return res.json() }) .then((data) = > { dispatch(getSuccess(data)) }) . catch ((e) = > { console.log(e.message) }) } } // 这里的方法返回一个函数进行异步操作 export function fetchPostsIfNeeded() { // 注意这个函数也接收了 getState() 方法 // 它让你选择接下来 dispatch 什么 return (dispatch, getState) = > { return dispatch(fetchPosts()) } } 5. const getList = state = > { return { lists//页面中数据: state.update.data//更新到state里的 } } export default connect( getList, { fetchPostsIfNeeded, refreshData })(Bar) 6. render( < Provider store = { store } > < div > < Router history = { history } routes = { routes } /> <DevTools / > < /div> </Provider > , document.getElementById(‘mount‘))
redux
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。