Skip to content

amsterdamharu/homebrew-redux

Repository files navigation

Homebrew redux and react-redux

Install

I would not advice you to use this in projects since it is in development and created as a learning exercise for me, that's why it's not on nmp.

You can add a github dependency with yarn using the following command:

yarn add https://github.com/amsterdamharu/homebrew-redux.git

The repo comes with an example app and I'd advice using that.

Example

Clone the repo with:

git clone https://github.com/amsterdamharu/homebrew-redux.git

Example app is included in the example directory so you can run yarn install from the example directory and start the app with yarn start.

Functions in homebrew store

CreateStore

The createStore works a little different than redux createStore as it returns an object that contains store, useDispatch and useSelector.

You can provide multiple enhancers with compose and convert store=>next=>action middleware functions to an enhancer with applyMiddleware.

As stated before; the createStore function will return {store, useSelector,useDispatch}, an example of how it's used can be found here

applyMiddleware

With applyMiddleware you can convert one or more middleware functions (=store=>next=>action) to an enhancer (=createStore=>(reducer,initialState,enhancer)).

Example of how it's used can be found here and here. You could just run applyMiddleware and pass all three middleware functions to it but this example is to show that you can pass one or more middleware functions and combine enhancers using compose.

compose

With compose you can compose enhancers, it is almost the same as redux compose but you have to pass at least one function to it and if you pass something that isn't a function it will be filtered out (no errors thrown).

This enables you to pass redux dev tools enhancer to compose as long as at least one other enhancer is a function:

const middleware = compose(
  applyMiddleware(
    () => next => action => {
      console.log('middleware');
      return next(action);
    }
  ),
  //If redux dev tools is not installed as Chrome extension
  //  it will not cause an error because compose will filter
  //  it out and the other enhancer is an enhancer function
  window.__REDUX_DEVTOOLS_EXTENSION__ &&
    window.__REDUX_DEVTOOLS_EXTENSION__()
);

An example of how it's used can be found here

createStoreProvider

With createStoreProvider you can create something resembling a react-redux Provider, you need to pass it a store that you created with createStore.

Because you passed the store when you created the Provider you don't need to pass it as props when you use the provider. So <Provider store={store}> is not needed, you can just do: <Provider>

An example of how it's created can be found here and an example of how the provider is used can be found here

useSelector

The useSelector hook is returned from createStore. With useSelector you can select information from the store.

It is similar to react-redux useSelector but it doesn't take the second argument (equality function), to memoize you can use createSelector from reselect.

Examples of how it's used can be fount here and here

useDispatch

The useDispatch function is returned from createStore and is the same as react-redux useDispatch. It will return a dispatch function that can be used to dispatch actions.

Examples of how it's used can be found here and here.

About

redux and react-redux functions

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages