import React from 'react' import { render } from 'react-dom' import { createStore } from 'redux' import { Provider } from 'react-redux' import App from './container/app' import reducer from './reducer' const store = createStore(reducer) render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') )
reducer.jsx
Reduxでは状態遷移をreducerで管理する
const initialState { fuga: 1 } export default function reducer(state = initalState, action){ switch(action.type){ case 'INCREMENT': ... default: return state } }
container
containerはReduxのStoreが管理する状態遷移をReactのプロパティとして流し込む
container/app.jsx
import React from 'react' import { connect } from 'react-redux' import App from '../component/app' function mapStateToProps(state){ return state } function mapDispatchToProps(dispatch){ return { handleClick: () => { dispatch(increment())} } } export default connect(mapStateToProps)(App)
reactでviewを管理し、reducerでstateの状態遷移を行う
とりあえず、reduxの環境構築からか。