2 ms·
I grabbed a boilerplate[1] and read through it to produce a basic CRUD app for tracking mini libraries. mostly follow where the data flows through, and look up
by 8note 11y ago
I grabbed a boilerplate[1] and read through it to produce a basic CRUD app for tracking mini libraries. mostly follow where the data flows through, and look up details on anything that looks like it could be doing a lot of stuff.
the gyst is, you have your state [Redux store] which is updated through reducer functions. Each reducer tracks the state for its part of the system, and is called with an action name+data when the state should change.
actions are called through a function, dispatch. it is typical to run a function as it's input, dispatch(makeAction()) where makeAction does things like make a REST request.
the state object is passed into React components as state and properties, which you can use for rendering HTML. to receive them, you register what you want from the reducers, and it is automagically passed in, and you can pass properties down to child components as HTML looking markup.
when something happens, like a user types into a text box, you call dispatch with the new text to be added to the state, which then gets reduced and passed into the next render call of the component, to update what's shown in the text box.
specific to that codebase, containers are top level components.
routing is done as a React component, where you render a tree of possible routes, pulling out variables as you go, to feed into the component/container leaves, and the matching route is rendered.
[1] https://github.com/choonkending/react-webpack-node https://github.com/choonkending/react-webpack-node
[2] https://github.com/jhedin/little-libraries https://github.com/jhedin/little-libraries