redux-helper-np

Made by Kiran Neupane #Buggged

Install

npm install --save redux-helper-np

Usage

Creating Store

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { createStore, combineReducers } from 'redux'
import { makeReducer } from 'redux-helper-np'
import { Provider } from 'react-redux'

const allReducer = combineReducers({
  counter: makeReducer('counter', { count: 0 }),
  users: makeReducer('users'),
  custom: makeReducer('custom', { text: 'Initial unchanged text' })
})

const store = createStore(
  allReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Consuming & Mutating Counter State

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { updateState } from 'redux-helper-np'

function Counter() {
  const count = useSelector((state) => state.counter.count)
  const dispatch = useDispatch()
  return (
    <div>
      <p>Count is: {count}</p>
      <br />
      <button
        onClick={() => dispatch(updateState('counter', { count: count + 1 }))}
      >
        Increse
      </button>
      <br />
      <br />
      <button
        onClick={() => dispatch(updateState('counter', { count: count - 1 }))}
      >
        Decrease
      </button>
    </div>
  )
}

export default Counter

Consuming & Mutating User Api State

import React from 'react'
import Axios from 'axios'
import { fetchFromApi } from 'redux-helper-np'
import { useDispatch, useSelector } from 'react-redux'

function Users() {
  const dispatch = useDispatch()
  const users = useSelector((state) => state.users)
  const fetchUser = () => {
    return Axios.get('https://jsonplaceholder.typicode.com/users')
  }

  React.useEffect(() => {
    fetchFromApi(dispatch, 'users', fetchUser)
      .then(console.log)
      .catch(console.error)
    // eslint-disable-next-line
  }, [])

  return (
    <div>
      {users.status === 'loading' && <p>Loading....</p>}
      {users.status === 'data' && <p>{JSON.stringify(users.data)}</p>}
      {users.status === 'error' && (
        <p style={{ color: 'red' }}>{JSON.stringify(users.data)}</p>
      )}
    </div>
  )
}

export default Users

Consuming & Mutating User Custom Action State

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { customAction } from 'redux-helper-np'

let count = 0
function CustomAction() {
  const custom = useSelector((state) => state.custom)
  const dispatch = useDispatch()

  const setCustomData = (state) => {
    count++
    return {
      ...state,
      text: 'this text is from custom action component ' + count
    }
  }

  return (
    <div>
      <p>Custom text is: {custom.text}</p>
      <br />
      <button onClick={() => dispatch(customAction('custom', setCustomData))}>
        Change Text
      </button>
    </div>
  )
}

export default CustomAction

Information

The package helps to minimize the code while creating redux, it completely remove need of reducers and action

About Author

Kiran Neupane
[email protected]
Facebook

Support This Package

React Tutor @ Youtube

Channel Name: Buggged
Youtube
Website

License

MIT © keyrunpay