ReactからReact + Reduxへ
https://qiita.com/manipulative/items/f4850fd2dca2c120dfd3
この間作ったやつをReduxに。
reducerも分けたいな。。
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import App from './components/App';
import toDoListReducer from './reducers/toDoList';
const RootReducer = combineReducers({toDoListReducer});
const store = createStore(RootReducer);
ReactDOM.render(
<Provider store={ store }>
<App />
</Provider>,
document.getElementById('root')
);
components/App.jsx
import React from 'react';
import InputToDo from '../containers/InputToDo';
import ToDoList from '../containers/ToDoList';
const App = () => (
<div>
<InputToDo />
<ToDoList />
</div>
);
export default App;
components/InputToDo.jsx
const InputToDo = ({ title, content, changeTitle, changeContent, addToDo }) => {
return(
<div>
<div>
タイトル:<input type="text" value={title} onChange={e => changeTitle(e.target.value)}/>
<br/>
内容:<textArea value={content} onChange={e => changeContent(e.target.value)}/>
</div>
<div onClick={e => addToDo()}>追加</div>
</div>
);
};
export default InputToDo;
components/ToDoList.jsx
const ToDoList = ({ toDoList, deleteToDo }) => {
return(
<ul>
{
toDoList.map((m, i) => {
return <li key={i}>
タイトル:{m.title}<br/>
内容:{m.content}<br/>
<button onClick={e => deleteToDo(m.id)}>削除{m.id}</button>
</li>;
})
}
</ul>
);
};
export default ToDoList;
connect関数は重要!
けど、結構魔界っぽかったのであとで探検しなければ。。
containers/InputToDo.jsx
import { connect } from 'react-redux';
import InputToDo from '../components/InputToDo';
import * as Actions from '../actions/inputToDo';
import { bindActionCreators } from 'redux';
export default connect(
state => ({
title: state.toDoListReducer.title,
content: state.toDoListReducer.content
}),
dispatch => bindActionCreators(Actions, dispatch)
)(InputToDo);
containers/ToDoList.jsx
import { connect } from 'react-redux';
import ToDoList from '../components/ToDoList';
import * as Actions from '../actions/toDoList';
import { bindActionCreators } from 'redux';
export default connect(
state => ({
toDoList: state.toDoListReducer.toDoList
}),
dispatch => bindActionCreators(Actions, dispatch)
)(ToDoList);
reducers/toDoList.jsx
const initialState = { title: '', content: '', toDoList:[] };
export default function toDoListReducer(state = initialState, action){
switch (action.type) {
case 'ADD_TODO':
return Object.assign({}, state, {
toDoList: [...state.toDoList, { id: action.id, title: state.title, content: state.content }]
});
case 'DELETE_TODO':
return Object.assign({}, state, { toDoList: state.toDoList.filter(t => t.id !== action.id)});
case 'CHANGE_TITLE':
return Object.assign({}, state, { title: action.title });
case 'CHANGE_CONTENT':
return Object.assign({}, state, { content: action.content });
default:
return state;
}
}
actions/inputToDo.jsx
let nextTodoId = 0;
export const addToDo = () => ({
type: 'ADD_TODO',
id: nextTodoId++,
});
export const changeTitle = title => ({
type: 'CHANGE_TITLE',
title
});
export const changeContent = content => ({
type: 'CHANGE_CONTENT',
content
});
actions/toDoList.jsx
export const deleteToDo = id => ({
type: 'DELETE_TODO',
id
});
stores/stores.jsx
import {createStore, applyMiddleware} from 'redux';
import Reducer from './reducers/combineReducers';
import {createLogger} from 'redux-logger';
export default function configureStore() {
const logger = createLogger({logger:console});
const createStoreWithMiddleware = applyMiddleware(logger)(createStore);
const store = createStoreWithMiddleware(Reducer);
return store;
}