Investigate state management libraries (Context API, Redux, Recoil)

[ddfridley]

This is a test to see if it works.

[poornaraob]

05/27: DJ will work on this at slower pace. He is starting up with fellowship and need time.

[poornaraob]

06/10: Will work in upcoming weeks.

[djbowers]

I've been doing some reading about a new state management library created by Facebook for React called Recoil. You can read an article here or watch this video if you're interested.

My takeaways are:

• It allows for shared state between components with less boilerplate than Redux
• There is a smaller learning curve than Redux because it is similar to React Hooks
• It is better than Context API for shared local state because it requires fewer components to re-render, Context is better for passing state to a tree of components

I think when I get some time to work on this project, I will try to get an MVP working with Recoil and see how it goes.

[ddfridley]

I noticed the article but hadn't read it until now.  But not this one thing: Note: Recoil is based on react hooks and will only work for functional components.

Undebate.jsx is till a class component - but I think we can get to functional.

I'm interested in Recoil. The thing that goes against my grain is that recoil (or at least this example) wants us to put selectors in the selector in it's own file, and the atom in it's own file.  (and redux does the same thing with actions and store). But I learned to have related things together - so if yo yhave a "Counter" componoent, that has a count state, and an increment function, that you should have that all in one place - and if it's small that should be one file. (or expand into a directory with an index.js).   I see redux, and recoil want to separate it out - but they don't explain WHY!. What am I missing.  If it's one file, or directory, it's easy to reuse in the same project - or other projects.

I know they teach this about separating things - but I really want to get to the advantages and disadvantages.  Or is it just about how some people prefer to organize things one way - and others another.

david.

On 6/15/2020 10:52 AM, DJ Bowers wrote:

I've been doing some reading about a new state management library created by Facebook for React called Recoil. You can read an article here https://medium.com/@chandan.reddy/react-recoil-vs-redux-the-ultimate-react-state-management-face-off-188a729a70ee or watch this video https://www.youtube.com/watch?v=_ISAA_Jt9kI&feature=emb_title if you're interested.

My takeaways are:

• It allows for shared state between components with less boilerplate than Redux
• There is a smaller learning curve than Redux because it is similar to React Hooks

I think when I get some time to work on this project, I will try to get an MVP working with Recoil and see how it goes.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/EnCiv/undebate/issues/166#issuecomment-644279533, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAZJ537KGPNXFTSP4PBR7V3RWZNWVANCNFSM4MZFF3LA.

[ddfridley]

@djbowers I hacked it. You don't have to separate the selector and the atom from the component. You can put it all in one file, and when it's simple like the example, its short and sweet. I'm liking recoil more and more :-) This works if you change RecoilExample.js in their example..

import React from 'react'
import MainComponent from './MainComponent'
import { useRecoilState, useRecoilValue, atom, selector } from 'recoil';

export const counterState = atom({
    key: 'counterState',
    default: 0
});

export const incrementSelector = selector({
    key: 'incrementSelector',
    get: ({ get }) => {
        const count = get(counterState);
        return count + 1;
    },
});

function RecoilExample() {
    const [count, setCounter] = useRecoilState(counterState);
    let value = useRecoilValue(incrementSelector);

    return (
        <div>
            <MainComponent count={count} handleFireClick={() => setCounter(value)} example='Recoil' />
        </div>
    );
}

export default RecoilExample

[ddfridley]

This was interesting: https://blog.bitsrc.io/redux-react-alternatives-c1733793a339