Simple abstraction over Redux to make state management easy.
You can change redux state for ui without creating constants and actions, just see examples.
Based on reduceless
For start we will create simple reducer file as you doing with redux.
You already know how to do it:
const initialState = {
settings: {
showExamplePopup: false,
}
}
export default function app(state, action) { }After this we can use new "connect" from "reduceless-connect":
This example for change "test" variable in reducer "app" without constants and actions. Simple?
import { connect } from 'reduceless-connect';
import * as actionCreators from 'redux/modules'; // https://github.com/erikras/ducks-modular-redux
@connect(
['app'], // working as 'state => state.app' in @connect react-redux.
{ ...actionCreators.app }, // working as 'dispatch => bindActionCreators({ ...actionCreators.app }, dispatch)' in @connect react-redux
// why did me add "actionsCreators"? Just for example, we can replace default "connect" in "redux" with "connect" from reduceless-connect.
[{ setAppSettings: 'app.settings' }], // new method for change app.settings redux state
)
export default class TestComponent extends Component {
static propTypes = {
setAppSettings: PropTypes.func,
settings: PropTypes.object,
data: PropTypes.array,
};
render() {
const { settings, setAppSettings, data } = this.props;
return (
<section>
<button onClick={() => setAppSettings({ showExamplePopup: true })}>
test
</button>
{ settings.showExamplePopup && <div>showExamplePopup === true</div> }
</section>
);
}
}Don't forget: We have actionCreators too. So we can use redux actions for data fetch and new method "setAppSettings" for change ui
With this example we can change "settings" in "categories" reducer and "settings" in app reducer without constants and actions.
@connect(
['app', 'user', 'categories'], // working as 'state => ({ ...state.app, ...state.user, ...state.categories })' in @connect react-redux
{ ...actionCreators.app, ...actionCreators.posts }, // // working as 'dispatch => bindActionCreators({ ...actionCreators.app, ...actionCreators.posts }, dispatch)' in @connect react-redux in @connect react-redux
[{
setAppSettings: 'app.settings'
}, {
setCategoriesSettings: 'categories.settings'
}],
)Can i change array? Yes, can! See next example for more details:
<button onClick={() => setAppSettings('list.2', { qwe: true })}> // = app.settings.list[2].qwe = trueFor object:
<button onClick={() => setAppSettings('example.a', { qwe: true })}> // = app.settings.example.a.qwe = trueSee the repo "redux-easy-boilerplate", branch "reduceless-connect".
Component "app/components/Containers/ReducelessExample"
@connect(
['app.data.info', 'posts.example.test'], // working as 'state => ({ ...state.app.data.info, ...state.posts.example.test })' in @connect react-redux@connect(
['app'], // working as 'state => state.app' in @connect react-redux
{ ...actionCreators.app }, // working as 'dispatch => bindActionCreators({ ...actionCreators.app }, dispatch)' in @connect react-redux
[{ setAppSettings: props => `app.data.${props.index}` }],
)Very simple. Just install npm package
$ npm install reduceless-connect --save-dev
After: you need update your default code with redux.
Jus add "wrapReducerWithSetGlobalState" in combine reducers:
import { wrapReducerWithSetGlobalState } from 'reduceless-connect';
const rootReducer = wrapReducerWithSetGlobalState(
combineReducers({
form: formReducer,
app,
user,
users,
posts,
categories,
questions,
rules,
quotes,
})
);And your simple reducer file:
export default function app(state = {
settings: {
test: false,
},
}, action) {