Last active
July 19, 2018 20:32
-
-
Save Luchanso/f588bb6c112a7b4086a69c3fc1474027 to your computer and use it in GitHub Desktop.
Сравнение redux-act и redux-actions
This file contains hidden or 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 functions | |
import { createStore } from 'redux'; | |
import { createAction, createReducer } from 'redux-act'; | |
// Create an action creator (description is optional) | |
const add = createAction('add some stuff'); | |
const increment = createAction('increment the state'); | |
const decrement = createAction('decrement the state'); | |
// Create a reducer | |
// (ES6 syntax, see Advanced usage below for an alternative for ES5) | |
const counterReducer = createReducer({ | |
[increment]: (state) => state + 1, | |
[decrement]: (state) => state - 1, | |
[add]: (state, payload) => state + payload | |
}, 0); // <-- This is the default state | |
// Create the store | |
const counterStore = createStore(counterReducer); | |
// Dispatch actions | |
counterStore.dispatch(increment()); // counterStore.getState() === 1 | |
counterStore.dispatch(increment()); // counterStore.getState() === 2 | |
counterStore.dispatch(decrement()); // counterStore.getState() === 1 | |
counterStore.dispatch(add(5)); // counterStore.getState() === 6 | |
console.log(counterStore.getState()); |
This file contains hidden or 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 { createStore } from 'redux'; | |
import { createAction, handleActions } from 'redux-actions'; | |
// Create an action creator (description is optional) | |
const add = createAction('add some stuff'); | |
const increment = createAction('increment the state'); | |
const decrement = createAction('decrement the state'); | |
// Create a reducer | |
// (ES6 syntax, see Advanced usage below for an alternative for ES5) | |
const counterReducer = handleActions({ | |
[increment]: (state) => state + 1, | |
[decrement]: (state) => state - 1, | |
[add]: (state, action) => state + action.payload | |
}, 0); // <-- This is the default state | |
// Create the store | |
const counterStore = createStore(counterReducer); | |
// Dispatch actions | |
counterStore.dispatch(increment()); // counterStore.getState() === 1 | |
counterStore.dispatch(increment()); // counterStore.getState() === 2 | |
counterStore.dispatch(decrement()); // counterStore.getState() === 1 | |
counterStore.dispatch(add(5)); // counterStore.getState() === 6 | |
console.log(counterStore.getState()); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment