Giter VIP home page Giter VIP logo

bidanjun / redaybak Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 0.0 222 KB

redux is so bad,so I made reday to manage state of react app. yes, it's very simple,and could do anything that redux can do,without so manay duplicated code that redux made. the core of reday only have two small files,it's based on the state of react itself,that mean it could runing stability.

License: Other

Batchfile 0.09% HTML 1.87% JavaScript 97.96% CSS 0.07%

redaybak's Introduction

what's reday

redux is so bad,so I made reday to manage state of react app. yes, it's very simple,and could do anything that redux can do,without so manay duplicated code that redux made.and the core of reday only have two small files,it's based on the state of react itself,small that mean it could runing stability,if there's bug here,it should belong to react itself,please report to facebook anyway.

you only need to know makeState and useState

import {store,makeState,useState} from 'reday'

// if you had a component named Counter,here is state by reday
export default makeState({counter:0},'Counter')(Counter)
yes,store.Counter is a getter of this component state,and store.Counter.setState is the setState of this component

//if you want use the state in the component tree    
const increment=(state, props) => ({counter: state.counter + 1})
export default useState(
    (props)=>({
        counter:store.Counter.counter,
        handleIncrease:store.Counter.setState(increment)
    })(Counter)
)

//if you want makeState and use it,that's it
export default compose(  
  makeState({counter:0},'Counter',store),
  useState(()=>({
    counter:store.Counter.counter,
    handleIncrement:()=>store.Counter.setState(increment)
})),
)(Counter)

more clearly Flux: state+action=>state

use redux,you must write too many code,and a bundle of concept,such as reducer,dispather,action,action type...yes,they tell us a framework named Flux.

but,state+action=>state is so simple,why made those things that we don't need? state is the state of react Component,we using functional setState by react itself,action is pure function like: const increment=(state, props) => ({counter: state.counter + 1})

we saved all state and setState of component default in store,store.Counter.setState(increment),could change the state of parent or grandparent component. no dispatcher
no action type and action name,just a function as action
no reducer here
no need createStore ,store is only an object like {}
no need Provider,you just import {store},then could access state in the component tree,Flux now only
for:state+action=>state

redaybak's People

Contributors

bidanjun avatar

Watchers

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