From 86da82e0241eb8bc9644a7f9594922013e74bf04 Mon Sep 17 00:00:00 2001 From: Kaijun Date: Fri, 15 Jan 2016 03:52:55 +0100 Subject: [PATCH] assemble redux stuffs, merge actions and reducers in a single file. --- client/actions/todos.jsx | 9 --- client/containers/App/index.js | 2 +- client/index.jsx | 4 +- client/reducers/todos.jsx | 52 ------------- .../index.jsx => redux/configureStore.jsx} | 6 +- client/{ => redux}/middleware/.gitkeep | 0 client/redux/modules/todos.jsx | 77 +++++++++++++++++++ .../index.jsx => redux/rootReducer.jsx} | 2 +- 8 files changed, 84 insertions(+), 68 deletions(-) delete mode 100644 client/actions/todos.jsx delete mode 100644 client/reducers/todos.jsx rename client/{store/index.jsx => redux/configureStore.jsx} (70%) rename client/{ => redux}/middleware/.gitkeep (100%) create mode 100644 client/redux/modules/todos.jsx rename client/{reducers/index.jsx => redux/rootReducer.jsx} (81%) diff --git a/client/actions/todos.jsx b/client/actions/todos.jsx deleted file mode 100644 index a87fbb8..0000000 --- a/client/actions/todos.jsx +++ /dev/null @@ -1,9 +0,0 @@ - -import { createAction } from 'redux-actions' - -export const addTodo = createAction('add todo') -export const deleteTodo = createAction('delete todo') -export const editTodo = createAction('edit todo') -export const completeTodo = createAction('complete todo') -export const completeAll = createAction('complete all') -export const clearCompleted = createAction('clear complete') diff --git a/client/containers/App/index.js b/client/containers/App/index.js index ec5170c..a1b39eb 100644 --- a/client/containers/App/index.js +++ b/client/containers/App/index.js @@ -4,7 +4,7 @@ import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import Header from '../../components/Header' import MainSection from '../../components/MainSection' -import * as TodoActions from '../../actions/todos' +import {actions as TodoActions} from '../../redux/modules/todos' import style from './style.css' class App extends Component { diff --git a/client/index.jsx b/client/index.jsx index 81a5fd4..6c76e3e 100644 --- a/client/index.jsx +++ b/client/index.jsx @@ -7,9 +7,9 @@ import ReactDOM from 'react-dom' import React from 'react' import App from './containers/App' -import configure from './store' +import configureStore from './redux/configureStore' -const store = configure() +const store = configureStore() const history = createHistory() syncReduxAndRouter(history, store) diff --git a/client/reducers/todos.jsx b/client/reducers/todos.jsx deleted file mode 100644 index c137ca1..0000000 --- a/client/reducers/todos.jsx +++ /dev/null @@ -1,52 +0,0 @@ - -import { handleActions } from 'redux-actions' - -const initialState = [{ - text: 'Use Redux', - completed: false, - id: 0 -}] - -export default handleActions({ - 'add todo' (state, action) { - return [{ - id: state.reduce((maxId, todo) => Math.max(todo.id, maxId), -1) + 1, - completed: false, - text: action.payload - }, ...state] - }, - - 'delete todo' (state, action) { - return state.filter(todo => todo.id !== action.payload ) - }, - - 'edit todo' (state, action) { - return state.map(todo => { - return todo.id === action.payload.id - ? { ...todo, text: action.payload.text } - : todo - }) - }, - - 'complete todo' (state, action) { - return state.map(todo => { - return todo.id === action.payload - ? { ...todo, completed: !todo.completed } - : todo - }) - }, - - 'complete all' (state, action) { - const areAllMarked = state.every(todo => todo.completed) - return state.map(todo => { - return { - ...todo, - completed: !areAllMarked - } - }) - }, - - 'clear complete' (state, action) { - return state.filter(todo => todo.completed === false) - } -}, initialState) diff --git a/client/store/index.jsx b/client/redux/configureStore.jsx similarity index 70% rename from client/store/index.jsx rename to client/redux/configureStore.jsx index 62230e0..4807a70 100644 --- a/client/store/index.jsx +++ b/client/redux/configureStore.jsx @@ -1,6 +1,6 @@ import { createStore } from 'redux' -import rootReducer from '../reducers' +import rootReducer from './rootReducer' export default function configure(initialState) { const create = window.devToolsExtension @@ -10,8 +10,8 @@ export default function configure(initialState) { const store = create(rootReducer, initialState) if (module.hot) { - module.hot.accept('../reducers', () => { - const nextReducer = require('../reducers') + module.hot.accept('./rootReducer', () => { + const nextReducer = require('./rootReducer') store.replaceReducer(nextReducer) }) } diff --git a/client/middleware/.gitkeep b/client/redux/middleware/.gitkeep similarity index 100% rename from client/middleware/.gitkeep rename to client/redux/middleware/.gitkeep diff --git a/client/redux/modules/todos.jsx b/client/redux/modules/todos.jsx new file mode 100644 index 0000000..17076a4 --- /dev/null +++ b/client/redux/modules/todos.jsx @@ -0,0 +1,77 @@ +import {createAction, handleActions } from 'redux-actions' + +const ADD_TODO = 'add todo' +const DELETE_TODO = 'delete todo' +const EDIT_TODO = 'edit todo' +const COMPLETE_TODO = 'complete todo' +const COMPLETE_ALL = 'complete all' +const CLEAR_COMPLETE = 'clear complete' + +// Actions +const addTodo = createAction(ADD_TODO) +const deleteTodo = createAction(DELETE_TODO) +const editTodo = createAction(EDIT_TODO) +const completeTodo = createAction(COMPLETE_TODO) +const completeAll = createAction(COMPLETE_ALL) +const clearCompleted = createAction(CLEAR_COMPLETE) + +// Exposed Actions +export const actions = { + addTodo, + deleteTodo, + editTodo, + completeTodo, + completeAll, + clearCompleted, +} + +// Reducers +const initialState = [{ + text: 'Use Redux', + completed: false, + id: 0 +}] + +export default handleActions({ + [ADD_TODO] (state, action) { + return [{ + id: state.reduce((maxId, todo) => Math.max(todo.id, maxId), -1) + 1, + completed: false, + text: action.payload + }, ...state] + }, + + [DELETE_TODO] (state, action) { + return state.filter(todo => todo.id !== action.payload ) + }, + + [EDIT_TODO] (state, action) { + return state.map(todo => { + return todo.id === action.payload.id + ? { ...todo, text: action.payload.text } + : todo + }) + }, + + [COMPLETE_TODO] (state, action) { + return state.map(todo => { + return todo.id === action.payload + ? { ...todo, completed: !todo.completed } + : todo + }) + }, + + [COMPLETE_ALL] (state, action) { + const areAllMarked = state.every(todo => todo.completed) + return state.map(todo => { + return { + ...todo, + completed: !areAllMarked + } + }) + }, + + [CLEAR_COMPLETE] (state, action) { + return state.filter(todo => todo.completed === false) + } +}, initialState) diff --git a/client/reducers/index.jsx b/client/redux/rootReducer.jsx similarity index 81% rename from client/reducers/index.jsx rename to client/redux/rootReducer.jsx index 566a4bb..2e66274 100644 --- a/client/reducers/index.jsx +++ b/client/redux/rootReducer.jsx @@ -1,7 +1,7 @@ import { combineReducers } from 'redux' import { routeReducer as routing } from 'redux-simple-router' -import todos from './todos' +import todos from './modules/todos' export default combineReducers({ routing,