Last active
January 31, 2016 12:13
-
-
Save terrierscript/f332e7b29d9792699bd5 to your computer and use it in GitHub Desktop.
Redux + Reactのboilerplateっぽいチートシート未満 ref: http://qiita.com/inuscript/items/f38e6651df3fa5508454
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) | |
| ) | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | |
| ) | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { createAction } from "redux-actions" | |
| import * as types from "./types" | |
| export const setTodo = createAction(SET_OBJ, (obj) => obj) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export const SET_OBJ = "set_obj" |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment