Redux + Reactのboilerplateっぽいチートシート未満 ref: http://qiita.com/inuscript/items/f38e6651df3fa5508454
import { combineReducers } from 'redux'
import * as types from "./types"
const someItem = (state = {}, action) => {
switch(action.type){
case types.SET_OBJ:
return Object.assign({}, state, action.payload)
default:
return state
}
}
const rootReducer = combineReducers({
someItem
})
export default rootReducer
export const SET_OBJ = "set_obj"
import { createAction } from "redux-actions"
import * as types from "./types"
export const setTodo = createAction(SET_OBJ, (obj) => obj)
import { bindActionCreators } from "redux"
import { connect, Provider } from "react-redux"
import App from "./Component/App.js"
import * as actions from "./actions"
function mapStateToProps(state){
// 必要に応じてreselectとかここで使う
return state
}
function mapDispatchToProps (dispatch) {
// dispatchとかcomponent以下に渡したくないのでここでbindしてしまう。
return bindActionCreators(actions, dispatch)
}
export default function createContainer(store){
let ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(App)
return (
<Provider store={store}>
<ConnectedApp />
</Provider>
)
}
import reducers from "./reducers"
import {createStore, applyMiddleware} from "redux"
import thunk from "redux-thunk"
export default function setupStore(){
const initialState = {
todo: []
}
return createStore(
reducers,
initialState,
applyMiddleware(thunk)
)
}
import React, { Component } from "react"
import ReactDom from "react-dom"
import setupStore from "./store"
import createContainer from "./container"
export default function render(){
let containerEl = document.querySelector("#container")
let store = setupStore()
ReactDom.render(createContainer(store), containerEl)
}