https://github.com/hainv053/reduex
Management state with react context
https://github.com/hainv053/reduex
react react-native reduex redux state-management
Last synced: about 1 year ago
JSON representation
Management state with react context
- Host: GitHub
- URL: https://github.com/hainv053/reduex
- Owner: hainv053
- License: mit
- Created: 2018-09-24T08:59:51.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-25T03:03:18.000Z (almost 8 years ago)
- Last Synced: 2025-06-09T12:26:11.866Z (about 1 year ago)
- Topics: react, react-native, reduex, redux, state-management
- Language: JavaScript
- Homepage:
- Size: 13.7 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# reduex
State management with react context
## Installation
```bash
npm install reduex --save
```
or
```bash
yarn add reduex
```
## API
- ``: Root provider
- `createModel({state: {}, actions: {}})`: Create store model
- `connect`: Connect Compoment to reduex
- `getRootState`: Get root state
## Usage
#### Create store
`index.tsx`
```ts
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
import { createModel, Provider } from 'reduex';
const app = createModel({
state: {
title: 'Hello reduex'
},
actions: {
changeTitle: (rootState, payload) => {
return {
title: payload.title
};
},
changeTitleAsync: async (rootState, payload) => {
await new Promise(resolve => {
setTimeout(resolve, 5000)
})
return {
title: payload.title
};
}
}
});
const stores = {
app: app
}
ReactDOM.render(
,
document.getElementById('root') as HTMLElement
);
```
`App.tsx`
```ts
import * as React from 'react';
import { connect, getRootState } from 'reduex';
class App extends React.Component {
changeTitle = () => {
this.props.dispatch('app/changeTitle', {
title: 'Change Title'
});
};
changeTitleAsync = () => {
this.props.dispatch('app/changeTitleAsync', {
title: 'Change Title Async'
});
};
getRootState = () => {
console.log(getRootState());
};
render() {
return (
{this.props.title}
Change title
Get Root State
);
}
}
const mapStateToProps = (state) => {
return {
title: state.app.title
};
};
export default connect(mapStateToProps)(App);
```