diff --git a/index.html b/index.html index 8d59589..606889d 100644 --- a/index.html +++ b/index.html @@ -108,10 +108,11 @@
  • - +
    Step 6
    Redux: Dispatch Actions -     +
    demo | exercise
    +
  • diff --git a/step2-05/README.md b/step2-05/README.md index 4534ab4..66d2f10 100644 --- a/step2-05/README.md +++ b/step2-05/README.md @@ -16,6 +16,6 @@ From the official documentation site: 2. Open `exercise/src/reducers/pureFunctions.ts` and fill in the missing body of the pure functions. -3. Open `exercise/src/reducers/index.ts` and observe how those pureFunctions are called. +3. Open `exercise/src/reducers/index.ts` and fill in the missing case statements for the switch of `action.type`. 4. Open `exercise/src/reducers/pureFunctions.spec.ts` and implement tests for the functions you wrote for `remove`, `complete`, and `clear`. diff --git a/step2-05/exercise/src/reducers/index.ts b/step2-05/exercise/src/reducers/index.ts index 9dd64b3..b48bc42 100644 --- a/step2-05/exercise/src/reducers/index.ts +++ b/step2-05/exercise/src/reducers/index.ts @@ -1,19 +1,15 @@ import { Store } from '../store'; -import { addTodo, remove, complete, clear } from './pureFunctions'; +import { addTodo, remove, complete } from './pureFunctions'; export function reducer(state: Store['todos'], payload: any): Store['todos'] { switch (payload.type) { case 'addTodo': return addTodo(state, payload.id, payload.label); - case 'remove': - return remove(state, payload.id); - - case 'complete': - return complete(state, payload.id); - - case 'clear': - return clear(state); + // Fill in the blanks here for: + // - remove + // - complete + // - clear } return state; diff --git a/step2-06/README.md b/step2-06/README.md index 1815650..23810f5 100644 --- a/step2-06/README.md +++ b/step2-06/README.md @@ -1,3 +1,15 @@ # Step 2.6 -Dispatching Actions and Examining State +Redux: Dispatching Actions and Examining State. + +In this step, we learn about `dispatch` and `getState()`. Dispatching action messages to the store is the only means by which to inform the reducers to modify the shared state tree. + +We also saw how we may compose the reducers according to the shape + +# Exercise + +1. open the `exercise/src/reducers/reducer.spec.ts` + +2. Follow the instructions to fill out the reducer tests + +3. Run the tests with `npm test` diff --git a/step2-06/exercise/src/reducers/reducer.spec.ts b/step2-06/exercise/src/reducers/reducer.spec.ts index e97c35e..85b501a 100644 --- a/step2-06/exercise/src/reducers/reducer.spec.ts +++ b/step2-06/exercise/src/reducers/reducer.spec.ts @@ -1,10 +1,20 @@ +import { createStore } from 'redux'; +import { reducer } from '.'; +import { actions } from '../actions'; + describe('reducers', () => { - it('should listen to addTodo message', () => { - const store = createStoreWithDevTool(reducer, {}); - - console.log(store.getState()); - - store.dispatch(actions.addTodo('hello')); - store.dispatch(actions.addTodo('world')); + it('should add items', () => { + // 1. use Redux's createStore() to create a store with reducer as argument + // along with the initial state + // + // 2. call store.dispatch() with some action messages to indicate the kind of + // action to perform (in this case, addTodo) + // + // 3. assert with expect() on the resultant store.getState().todos }); + + // Tests left for you to do: + // - remove + // - clear + // - complete }); diff --git a/step2-06/index.html b/step2-06/index.html deleted file mode 100644 index 454cef5..0000000 --- a/step2-06/index.html +++ /dev/null @@ -1,6 +0,0 @@ - - - -
    - - diff --git a/step2-06/src/actions/index.ts b/step2-06/src/actions/index.ts deleted file mode 100644 index 4a067b9..0000000 --- a/step2-06/src/actions/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -import uuid from 'uuid/v4'; - -export const actions = { - addTodo: (label: string) => ({ type: 'addTodo', id: uuid(), label }), - remove: (id: string) => ({ type: 'remove', id }), - complete: (id: string) => ({ type: 'complete', id }), - clear: () => ({ type: 'clear' }) -}; diff --git a/step2-06/src/index.tsx b/step2-06/src/index.tsx deleted file mode 100644 index e4ca608..0000000 --- a/step2-06/src/index.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { reducer } from './reducers'; -import { createStore, compose } from 'redux'; -import { actions } from './actions'; - -/* Goop for making the Redux dev tool to work */ -declare var window: any; -const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; -function createStoreWithDevTool(reducer, initialStore) { - return createStore(reducer, initialStore, composeEnhancers()); -} - -const store = createStoreWithDevTool(reducer, {}); - -console.log(store.getState()); - -store.dispatch(actions.addTodo('hello')); -store.dispatch(actions.addTodo('world')); - -console.log(store.getState()); diff --git a/step2-06/src/reducers/index.ts b/step2-06/src/reducers/index.ts deleted file mode 100644 index 6eed3c5..0000000 --- a/step2-06/src/reducers/index.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { Store } from '../store'; -import { addTodo, remove, complete, clear } from './pureFunctions'; - -function todoReducer(state: Store['todos'] = {}, action: any): Store['todos'] { - switch (action.type) { - case 'addTodo': - return addTodo(state, action.id, action.label); - - case 'remove': - return remove(state, action.id); - - case 'clear': - return clear(state); - - case 'complete': - return complete(state, action.id); - } - - return state; -} - -export function reducer(state: Store, action: any): Store { - return { - todos: todoReducer(state.todos, action), - filter: 'all' - }; -} diff --git a/step2-06/src/reducers/pureFunctions.spec.ts b/step2-06/src/reducers/pureFunctions.spec.ts deleted file mode 100644 index b3815cf..0000000 --- a/step2-06/src/reducers/pureFunctions.spec.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { addTodo, complete } from './pureFunctions'; -import { Store } from '../store'; - -describe('TodoApp reducers', () => { - it('can add an item', () => { - const state = {}; - - const newState = addTodo(state, '0', 'item1'); - - const keys = Object.keys(newState); - - expect(newState).not.toBe(state); - expect(keys.length).toBe(1); - expect(newState[keys[0]].label).toBe('item1'); - expect(newState[keys[0]].completed).toBeFalsy(); - }); - - it('can complete an item', () => { - const state = {}; - - let newState = addTodo(state, '0', 'item1'); - - const key = Object.keys(newState)[0]; - - newState = complete(newState, key); - - expect(newState[key].completed).toBeTruthy(); - }); -}); diff --git a/step2-06/src/reducers/pureFunctions.ts b/step2-06/src/reducers/pureFunctions.ts deleted file mode 100644 index 69e492a..0000000 --- a/step2-06/src/reducers/pureFunctions.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { Store, FilterTypes } from '../store'; - -export function addTodo(state: Store['todos'], id: string, label: string): Store['todos'] { - return { ...state, [id]: { label, completed: false } }; -} - -export function remove(state: Store['todos'], id: string) { - const newTodos = { ...state }; - - delete newTodos[id]; - - return newTodos; -} - -export function complete(state: Store['todos'], id: string) { - const newTodos = { ...state }; - newTodos[id].completed = !newTodos[id].completed; - - return newTodos; -} - -export function clear(state: Store['todos']) { - const newTodos = { ...state }; - - Object.keys(state.todos).forEach(key => { - if (state.todos[key].completed) { - delete newTodos[key]; - } - }); - - return newTodos; -} - -export function setFilter(state: Store['filter'], filter: FilterTypes) { - return filter; -} diff --git a/step2-06/src/store/index.ts b/step2-06/src/store/index.ts deleted file mode 100644 index 221b5f4..0000000 --- a/step2-06/src/store/index.ts +++ /dev/null @@ -1,14 +0,0 @@ -export type FilterTypes = 'all' | 'active' | 'completed'; - -export interface TodoItem { - label: string; - completed: boolean; -} - -export interface Store { - todos: { - [id: string]: TodoItem; - }; - - filter: FilterTypes; -}