Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including redux-alita with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var reduxAlita = require("redux-alita")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

redux-alita v2.2.1

a small and easy tool for react to do something with redux



a small and easy tool for react to do something with redux

what's inside?

just one reducer, one action operator and one prepared Provider for root node.

why use it?

well... it's really tiny, you don't have to care about what's reducer like, how to make actions, what about asynchronous datas and others. just one function to set redux state with asynchronous or synchronous datas, just one function for everything.I think it's enough for normal project, at least, it's enough for me...

how to use?

example for basic usage

project for normal usage

online-demo(have a try)

  • yarn add redux-alita (npm i redux-alita)
  • add Provider to the root node
  • connect Component (default: the whole state will merge to the props) or use hook apis
  • use redux data or set redux data
  • for fetch api data, make sure register functions config before use setAlitaState (see example for basic use)


  • AlitaProvider
    • provider component for root node
  • connectAlita
    • connect function (just prepared mapStateToProps and mapDispatchToProps)
    • [{ stateKey: initialValue }] - initialValue for initialStateKey
  • setAlitaState
    • set redux data fucntion (after connect, you can use it in props)
    • funcParams -> { funcName, params, stateName = funcName, data }
    • only stateName and data for synchronous datas
    • funcName, params for asynchronous fetch apis
  • setConfig
    • register fetch functions before fetch usage
  • for hooks
    • useAlitaState default return the whole state, extract data by passing data keys
      • [stateKey] - stateKey without initialValue. [{ stateKey: initialValue }] - stateKey with initialValue
    • useAlitaCreator return function like setAlitaState above(update: add useCallback to prevent infinite loop in useEffect)
      const setAlitaState = useAlitaCreator();
      setAlitaState({ stateName: 'test', data: 'hello' });


    someKey: { // default value {}
        isFetching: true || false,
        data        // data for your component to use
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free