/ javascript

Notes on React related libraries

Notes on new (for me) libraries I have found. Little bit investigation what they are used for. Also links to library's or package's page.

Content

  1. Provider from React-redux
  2. HashRouter from React-router-dom.
  3. What is middleware in Redux?
  4. reduxImmutableStateInvariant
  5. redux-thunk library
  6. react-scripts library
  7. markdown-to-jsx library

Investigation

Provider (react-redux)

Used in root component to pass store to all container components in application. This makes code more maintainable when no need to pass store as a prop down the hill.

React-redux Docs - <Provider store>

HashRouter (react-router-dom)

React router which uses window.location.hash to keep UI in sync. Notable argument is basename, which ads basename to URL when used.

React Router: Declarative Routing for React.js

Middleware in Redux

Redux middleware is handling made between action and dispatching action. Good example is middleware which logs every action dispatched. Middlewares are added to store in createrStore().

Middleware ยท Redux

reduxImmutableStateInvariant

Throws an error when state is mutated inside or between dispatches. This us used only for development versions, because of performance loss.

GitHub - leoasis/redux-immutable-state-invariant

Redux thunk

Action creators in Redux returns action object. With Redux-thunk middleware, action creators can also return functions. This ables possibility to attach logic and async code when dispatching.

As said: Redux thunk is a middleware and is installed standard way.

const store = createStore(
  reducer,
  applyMiddleware(thunk.withExtraArgument(api))
)

GitHub - gaearon/redux-thunk

React scripts

Build, eject, start and test scrips of Create React App in own package.

https://www.npmjs.com/package/react-scripts

Markdown-to-jsx library

Compiles markdown content to JSX. Useful for showing fetched markdown content. Uses components inside JSX to parse Markdown content.

render((
    <Markdown>
        {markdown}
    </Markdown>
), document.body);

GitHub - probablyup/markdown-to-jsx