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.
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
.
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
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.
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
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
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
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.