terrierscript
1/31/2016 - 10:45 AM

Redux + Reactのboilerplateっぽいチートシート未満 ref: http://qiita.com/inuscript/items/f38e6651df3fa5508454

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)
}