react-redux ToDoリスト シンプルなサンプル

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