Using Redux
Redux is great for
- debugging
- keeping things consistent in the app
However its not written to be easily used by TypeScript. So we have simpleRedux.ts. Usage should be fairly obvious and is documented below.
One time stuff
(see state.ts):
- define the store state interface
- define initial state
- create
store.
Creating a new action
The magic is the add function. You pass in a reducer ... and you get the actionCreator created for free.
The main gain : the actionCreator argument + reducer -> state transform is all type checked.
export let addTabs = redux.add('addTabs', (state:StoreState, tabs: TabInstance[]): StoreState => {
tabs = state.tabs.concat(tabs);
return {
tabs
};
});
Creating a component
Define your props like :
export interface Props extends React.Props<any> {
// from react-redux ... connected below
errorsExpanded?: boolean;
}
And then connect your component:
@connect((state: StoreState): Props => {
return {
errorsExpanded: state.errorsExpanded,
};
})
Global state that comes from server
We setup such state in main.tsx basically setting it initially and updating it on new data recieved from server. e.g. The updated errors in the current project.
More
If you are looking for using these ideas in your own projects, Daniel has been kind enough to write up a project that does more and in a more decoupled (multiple disconnected reducers) way: