redext
v0.1.0
Published
A simple global store based on React Context and Hooks
Downloads
302
Maintainers
Readme
redext
A simple global store based on React Context and Hooks
Installation
npm install redext
or
yarn add redext
Use It
// store/models/common.js
import React from 'react';
export default {
state: {
theme: 'white',
showModal: false
},
effects: (dispatch) => {
return {
onOpenModal(modalState) {
this.updateState({
showModal: true,
modalState
});
// or
dispatch({
type: 'common/updateState',
payload: {
showModal: true,
modalState
}
});
// or
dispatch.common.updateState({
showModal: true,
modalState
})
}
}
},
reducers: {
updateState: (state, payload) => {
return {
...state,
...payload
};
},
changeTheme: (state) => {
return {
...state,
theme: state.theme === 'white' ? 'dark' : 'white'
};
}
}
}
// store/models/index.ts
import common from './common';
import auth from './auth';
export default {
common,
auth
}
// store/index.ts
import { Provider, connect, init, models } from 'redext';
import models from './models';
export { Provider, connect, init, models }
// client/index.ts
import { Provider, init, models } from './store';
const store = init({
models
});
const App = ({ children, initialValue = {} }) => {
return (
<Provider store={store} initialValue={initialValue}>
{children}
</Provider>
)
}
export default App
// client/pages/movie.js
import { connect, memoize, useDeepEffect } from 'redext';
const Movie = ({ dispatch, theme, onOpenModal }) => {
useDeepEffect(() => {
}, [array, object]);
return (
<div>
{theme}
</div>
)
}
const mapState = ({ common: { theme } }) => ({
theme
});
const mapDispatch = ({ common: { onOpenModal } }) => ({
onOpenModal
});
// options
const memoPropsAreEqual = (prevProps, nextProps) => {
if (nextProps.visible !== prevProps.visible) {
return false
}
return true
};
export default connect(mapState, mapDispatch)(memoize(Movie, memoPropsAreEqual))