React-NC-Redux-beta
Enhanced react-nc
by using functionality of react-redux
and simplified redux development steps.
Installation
npm install redux react-redux react-nc-redux-beta
Example
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import CTRL from 'react-nc-redux-beta';
CTRL.initializeState({
name: "iNont"
});
ReactDOM.render(
<App />
, document.getElementById('root'));
App.js
import React, { Component } from 'react';
import CTRL, { StateControl, StateConnect } from 'react-nc-redux-beta';
class App extends Component {
render() {
return (
<div>
My name is {CTRL.state.name}.
<input value={CTRL.state.name} placeholder="Type to change name"
onChange={(event)=>CTRL.setState({ name: event.target.value })} />
</div>
);
}
}
const mapStateToUpdate = ({ name }) => ({ name });
export default StateControl(
StateConnect(mapStateToUpdate)(App)
);
HOC
StateControl(Component)
Using to wrap the component that want it to be the store provider.
Mostly use for App
component
export default StateControl(App);
StateConnect(Component, withRef)
Similar to connect()
from react-redux, instead of using connect()
to pass the props to Component, using StateConnect()
to check if the Component need to be re-rendered or not.
const mapStateToUpdate = (state) => ({
displayName: state.displayName,
loading: state.loading
});
export default StateConnect(mapStateToUpdate)(MyComp);
Commands
CTRL.initializeState(initialState)
Set the initial state of CTRL.
CTRL.initializeState({
name: "iNont",
title: "React-NC",
array: [0, 1, 2, 3]
});
console.log(`My name is ${CTRL.state.name}.`);
// Output: My name is iNont.
CTRL.setState(state)
Set state of CTRL, you can use it likes setState()
of react component.
CTRL.initializeState({
name: "iNont",
title: "React-NC",
array: [0, 1, 2, 3]
});
CTRL.setState({
name: "Changed name"
});
console.log(CTRL.state);
/* Output: {
name: "Changed name",
title: "React-NC",
array: [0, 1, 2, 3]
} */
You are allow to set the action name for logging on ReduxDevTool by CTRL.setState(actionName)(state)
.
CTRL.setState("CHANGE_NAME")({
name: "New name"
});
CTRL.createAction(actionName, action)
You can create your own action to update the store instead of using CTRL.setState()
.
The action created in CTRL.actions
with the actionName you assigned.
CTRL.createAction(
"CHANGE_NAME",
(newName) => ({
name: newName
})
);
CTRL.actions.CHANGE_NAME("My new name");
console.log(CTRL.state);
/* Output: {
name: "My new name"
} */
CTRL.removeAction(actionName)
Remove the created action.
CTRL.resetState()
Reset CTRL state to initial state.