TinyRX (react-redux)

💊 TinyRX is an interface library to add middleware and React-Redux like reducing to Reacts hook system.

What does tinyRX do

TinyRX adds the missing features into reacts current useReducer landscape

Adds:

• Combine Reducers
• useMiddleWare

Use

Adding TinyRX to Your Project is simple!

import {useMiddleWare, combineReducers} from 'tinyrx';

TinyRX no longer provides context, its much easier to create your own.

Setup

TinyRX requires a minimal setup compared to other libraries.

Define Your reducers

const todoReducer = (state, action) => {
  switch(action.type) {
    case 'ADD_TODO': return [...state, action.payload];
    default: return state;
  }
}

const bookReducer = (state, action) => {
  switch(action.type) {
    case 'ADD_BOOK': return [...state, action.payload]
    default: return state;
  }
}

Setup the top level App

Note that the name of the keys in combine reducers must match the initial state passed to useReducer.

// combine reducers combines both Todos and Books together
const rootReducer = combineReducers({Todos: todoReducer, Books: bookReducer});
// warning just like with redux if both reducers have the same Key or Type both will be affected
// create context using react
const AppContext = React.createContext(null);

function App () {
  const [state, dispatch] = useReducer(rootReducer, {Books: [], Todos: []});
  return (
    <div>
      <AppContext.Provider value={{state, dispatch}}>
        <TodoComponent />
      </AppContext.Provider>
    </div>
  )
}

Define a component to consume the Context

function TodoComponent() {
  // useContext provides state and the dispatch function to your components
  const {state, dispatch} = useContext(AppContext);
  const [input, setInput] = useState("");
  function AddTodo(e){
    dispatch({type: 'ADD_TODO', payload: input})
  }

  function UpdateInput(e) {
    e.persist();
    setInput(input => e.target.value);
  }
  return (
  <div>
    <ul>
    {state.Todos.map(item => <li>{item}</li>)}
    </ul>
    <input onChange={UpdateInput}></input>
    <button onClick={AddTodo}>Click me</button>
  </div>
  )
}

MiddleWare

Using middleware is trivial! Just pass in an array of middleware you want to use to the new useMiddleware function! The dispatch passed to context must be changed to use the function returned from useMiddleWare; heres an example with thunk!

function App () {
  const AppContext = context;
  const [state, dispatch] = useReducer(Reducers, {Loaded: false});

  return (
    <div>
      <AppContext.Provider value={useMiddleWare([thunk], { state, dispatch })}>
        <Loader />
      </AppContext.Provider>
    </div>
  )
}

function Loader() {
  const { state, dispatch } = useContext(context);
  const testAsync = e => {
    dispatch(fetchPosts());
  };
  return (
    <div>
      {!state.Loaded ? <p>loaded</p> : <p>...loading</p>}
      <button onClick={testAsync}>Test</button>
    </div>
  );
}

function fetchPosts() {
  return function(dispatch, getState) {
    dispatch("IS_LOADING");
    return fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(
        response => response.json(),
        error => console.log('An error occurred.', error)
      )
      .then(json =>{
        dispatch("IS_LOADED");
        return json;
      }
      )
  }
}

Depends

react: ^16