Giter Club home page Giter Club logo

homebrew-redux's Introduction

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.

homebrew-redux's People

Stargazers

Anne Thorpe avatar

Watchers

James Cloos avatar Harm Meijer avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.