Middleware for better use of redux

redux-thunk, redux-promise 설치

 

redux-thunk 어떻게 function을 받을 지 알려줌

redux-promise 어떻게 promise를 받을 지 알려줌

 

이 둘 없이 redux를 사용하면 에러가 많이 나게 됨

 

 

 

index.js 에서 redux 연결시키기

//index.js

..
import {Provider} from 'react-redux';

ReactDOM.render(

	<Provider
    	store={}
    >
    	<App/>
    </Provider>
 ..

 

middleware 적용

//index.js

..
import {Provider} from 'react-redux';
import promiseMiddleware from 'redux-promise';
import ReduxThink from 'redux-thunk';

const createStoreWithMiddleWare=applyMiddleware(promiseMiddleware, ReduxThunk)(createStore)

ReactDOM.render(

	<Provider
    	store={createStoreWithMiddleWare()}
    >
    	<App/>
    </Provider>
..

 

 

 

reducer, redux extension 적용

//index.js

..
import {Provider} from 'react-redux';
import promiseMiddleware from 'redux-promise';
import ReduxThink from 'redux-thunk';
import Reducer from './_reducers';

const createStoreWithMiddleWare=applyMiddleware(promiseMiddleware, ReduxThunk)(createStore)

ReactDOM.render(

	<Provider
    	store={createStoreWithMiddleWare(Reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())}
    >
    	<App/>
    </Provider>
..

 

//_reducer/index.js

import { combineReducer } from 'redux';

const rootReducer = combineReducers({
	//combineReducers로 안에 들어가는 reducer들을 합쳐주는 것임
    //기능이 많아질 수록 늘어나는 reducer
	user,
})

export default rootReducer;