Created
August 29, 2018 02:33
-
-
Save ma2saka/e000cae25f8d42da724ed9284a7eb957 to your computer and use it in GitHub Desktop.
react-redux-simple
This file contains 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 from "react"; | |
import { render } from "react-dom"; | |
import { connect } from "react-redux"; | |
// 単純に props の value を表示するプレゼンテーションコンポーネントと、 | |
// Reduxの管理するストアからステートを受け取り、コンポーネントの props にマッピングするコンテナコンポーネント | |
const ValueComponent = props => <>value = {props.value}</>; | |
export const Value = connect(state => ({ | |
value: state.value | |
}))(ValueComponent); | |
// 単純に更新アクションを発行するボタンコンポーネントと、Reduxに接続するコンテナコンポーネント | |
// dispatch 直接呼んでるけどよくない | |
const UpdateButtonComponent = props => ( | |
<button | |
onClick={() => props.dispatch({ type: "ADD", payload: { value: 2 } })} | |
> | |
ADD 2 | |
</button> | |
); | |
export const UpdateButton = connect()(UpdateButtonComponent); |
This file contains 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 from "react"; | |
import { render } from "react-dom"; | |
import "./index.css"; | |
// createStoreとProviderの import | |
import { createStore } from "redux"; | |
import { Provider } from "react-redux"; | |
import { UpdateButton, Value } from "./counter"; | |
// 初期ステートを定義 | |
const initialState = { | |
value: 0 | |
}; | |
// reducer | |
// ステートを更新するための関数 | |
const reduceFunction = { | |
ADD: (state, data, meta) => ({ ...state, value: state.value + data.value }) | |
}; | |
const reducer = (state, action) => { | |
const f = reduceFunction[action.type] || (s => s); | |
return f(state, action.payload, action.meta); | |
}; | |
// ステートを保持するストアの作成 | |
const store = createStore(reducer, initialState); | |
class App extends React.Component { | |
render() { | |
return ( | |
<Provider store={store}> | |
<div> | |
<h1>Counter on React-Redux!</h1> | |
<Value /> | |
<UpdateButton /> | |
</div> | |
</Provider> | |
); | |
} | |
} | |
render(<App />, document.getElementById("content")); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment