MENU


Basic Usage

For every redux application, there should be exactly one data store.

To create the store, pass to createStore() a reducer function, which takes as parameters a state and an action object with a 'type' key.

Below we include the redux library directly in our HTML file, doing away with the need for any preprocessing (eg. using webpack).
RESETRUNFULL
<!DOCTYPE html>
<html>
   <head>
      <title>Redux basic example</title>
      <script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
   </head>
   <body>
      <div>
         <p>
            Clicked: <span id="value">0</span> times
            <button onclick="store.dispatch({ type: 'INCREMENT' })">+</button>
            <button onclick="store.dispatch({ type: 'DECREMENT' })">-</button>
         </p>
      </div>
      <script>
         function counter(state, action) {   // a reducer
            if (typeof state === 'undefined') return 0;
            switch (action.type) {
               case 'INCREMENT': return state + 1;
               case 'DECREMENT': return state - 1;
               default:          return state;
            }
         }
         var store = Redux.createStore(counter);
         function render() { document.getElementById('value').innerHTML = store.getState().toString();}
         render();
         store.subscribe(render);
      </script>
   </body>
</html>

After we have created our Redux store, we can:

To facilitate the dispatching of actions, you can define action creators, which are functions which return an action object:

function increment(){return {type:'INCREMENT'};} function decrement(){return {type:'DECREMENT'};} store.dispatch(increment());

You can further do away with calling dispatch() altogether by using bindActionCreators(). This is especially helpful if you wish to hide Redux: function increment(){return {type:'INCREMENT'};} function decrement(){return {type:'DECREMENT'};} const inc = Redux.bindActionCreators(inc, store.dispatch); const dec = Redux.bindActionCreators(dec, store.dispatch); inc(); dec(); /* alternatively: const ops = Redux.bindActionCreators({inc, dec}, store.dispatch); ops.inc(); ops.dec(); */

Note that createStore() can take a second parameter which initilizes the state of the store, and/or an additional enhancer parameter which represents a list of functions to be called every time before dispatch() is called (eg. middleware):

const reducer = combineReducers({todos, visibilityFilter}) const initializer = {list:[0]}; const enhancer = compose(applyMiddleware(thunk), DevTools.instrument()); const store = createStore(reducer, initializer, enhancer);

Reducers can be combined with the combineReducers() function.

Enhancers can be combined with the compose() function.

As opposed to subscribers which are invoked after every dispatch event, middleware functions are invoked before every dispatch event. You can pass an enhancer without passing an initializer too:

const store = createStore( todoApp, applyMiddleware( rafScheduler, timeoutScheduler, thunk, vanillaPromise, readyStatePromise, logger, crashReporter ) )