1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import App from './containers/app'; import store from './store'; import { setTopic, setDisplayMode, fetchBooks } from './actions'; store.dispatch(setTopic('javascript')); store.dispatch(setDisplayMode('THUMBNAIL')); store.dispatch(fetchBooks()); ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('example') ) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | /** * The fetchBooks action creator returns a function instead of an object. * Custom middleware is necessary for that to work. */ const fetchBooks = () => { return fetchCurrentTopic; } const fetchStart = () => { return { type: 'FETCH_STARTED' } } const fetchComplete = json => { return { type: 'FETCH_COMPLETE', json } } const fetchFailed = error => { return { type: 'FETCH_FAILED', error } } const setTopic = topic => { return { type: 'SET_TOPIC', topic } } const setDisplayMode = displayMode => { return { type: 'SET_DISPLAY_MODE', displayMode } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | const URL = 'https://www.googleapis.com/books/v1/volumes?q='; const fetchCurrentTopic = (dispatch, state) => { dispatch(fetchStart()) fetch(URL + state.topic) .then(res => { return res.json() }) .then(json => { if(json.error) { dispatch(fetchFailed(json.error)) } else { dispatch(fetchComplete(json)) } }) .catch(error => { dispatch(fetchFailed(json.error)) }) } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | import { combineReducers } from 'redux'; const defaults = { TOPIC: 'javascript', DISPLAY_MODE: 'THUMBNAIL', BOOKS: [] } ... const fetchReducer = (state = defaults.BOOKS, action) => { switch(action.type) { case 'FETCH_STARTED': case 'FETCH_FAILED': return []; case 'FETCH_COMPLETE': return action.json.items default: return state; } } // Combine reducers export default combineReducers({ topic: topicReducer, displayMode: displayModeReducer, books: fetchReducer }); |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |