diff --git a/redux.md b/redux.md new file mode 100644 index 0000000..fec067c --- /dev/null +++ b/redux.md @@ -0,0 +1,122 @@ + +@@ -0,0 +1,120 @@ +Redux cheatsheet + +-->>Creating a store + +import { createStore } from 'redux' +// Reducer +function counter (state = { value: 0 }, action) { + switch (action.type) { + case 'INCREMENT': + return { value: state.value + 1 } + case 'DECREMENT': + return { value: state.value - 1 } + default: + return state + } +} +let store = createStore(counter) + +// Optional - you can pass `initialState` as a second arg +let store = createStore(counter, { value: 0 }) +(A store is made from a reducer function, which takes the current state, and returns a new state depending on the action it was given.) + + + + +-->>Using a store +let store = createStore(counter) +// Dispatches an action; this changes the state +store.dispatch({ type: 'INCREMENT' }) +store.dispatch({ type: 'DECREMENT' }) +// Gets the current state +store.getState() +// Listens for changes +store.subscribe(() => { ... }) +Dispatch actions to change the store’s state. + +#React Redux +-->>Provider +import { Provider } from 'react-redux' +React.render( + + + , mountNode) +The component makes the store available in your React components. You need this so you can use connect(). + + + + +-->>Mapping state +import { connect } from 'react-redux' +// A functional React component +function App ({ message, onMessageClick }) { + return ( +
onMessageClick('hello')}> + {message} +
+ ) +} +// Maps `state` to `props`: +// These will be added as props to the component. +function mapState (state) { + return { message: state.message } +} + +// Maps `dispatch` to `props`: +function mapDispatch (dispatch) { + return { + onMessageClick (message) { + dispatch({ type: 'click', message }) + } + } +} + +// Connect them: +export default connect(mapState, mapDispatch)(App) + + + +-->>Shorthand +export default connect( + (state) => ({ + message: state.message + }), + (dispatch) => ({ + onMessageClick: (message) => { + dispatch({ type: 'click', message }) + } + }) +)(App) +Same as above, but shorter. + + + +-->>Combining reducers +const reducer = combineReducers({ + counter, user, store +}) +Combines multiple reducers into one reducer function. See: combineReducers (redux.js.org) + + + +#Middleware + + +-->>Signature +// noop middleware +const logger = store => dispatch => action { dispatch(action) } +const logger = store => { + // This function runs on createStore(). + // It returns a decorator for dispatch(). + + return dispatch => { + // Runs on createStore(), too. + // It returns a new dispatch() function + + return action => { + // Runs on every dispatch() + } + } +}