redux-ts
Utils to define react redux reducer/action in typescript.
Now FSA compliant
For breaking changes you can take look CHANGELOG
Installation
# npm npm install --save redux-ts# yarn yarn add redux-ts
Usage
Quickstart
This is all in one reference implementation of redux-ts
library. You can enhance that solution depend on your needs.
// Define reducer state // Build reducer .handleswitchTheme,, // Build store .withReducerBuildersMap .withDevTools // enable chrome devtools .build
// Map store to component props // Pass action object to create dispatchable func. (aka. bindActionCreators) // Connect component // Connect store ReactDOM.render, document.getElementById'app'
Use case (connected-react-router)
This is sample usage of connected-react-router
with redux-ts
.withMiddlewarerouterMiddlewarehistory .withReducer'router', routerReducer .withDevTools // enable chrome devtools .build
ReactDOM.render , document.getElementById'react-root',
Using react-ts
Store
Create redux store with builder pattern.
.withInitialState .withMiddleware .withReducer"auth", authReducer .withDevTools .build;}
- As generic parameter, it requires store state type in order to match given reducers and the state.
- Any number of middleware, enhancer or reducer can be used to build the state.
mapStoreToProps
is a dummy method that returns passed parameter again. This method can be used to map store object to props which are consumed from connected components. Return type isMapStateToPropsParam
which is compatible with connect.connected
function is also another dummy function that wraps original connect function but with implicit type resolution support. Problem with original one, when you connect your component with connect method, it is trying to resolve typing by matching signature you passed as parameters to connect (mapStateToProps, mapDispatchToProps) and component own properties. If you are using explicit typing mostly, it is totally fine to use original one. But if you are expecting implicit type resolution, original connect is failing and resolving inner component type asnever
.
Actions
Action declaration can be done with createAction
function which takes action name as parameter and payload type as generic type.
Each action should have unique identifier which is first parameter of createAction
function. You can also define your metadata type and pass to generic type as second argument.
- Return value of
createAction
function is action creator function that takes payload and metadata objects as parameters. - Return value of action creator function is plain js object that have payload, meta and type fields which is proposed for FSA.
Reducers
Reducers are consumer functions that consumes actions and change application state. Difference from original redux implementation in redux-ts
, reducers can also dispatch another action asynchronously. Each reducer method should return state value even it doesn't change it. Async dispatch operations will be handled after original dispatch cycle is finished.
// Initial value of sub state .init // Handle SetToken action .handleSetToken, // Handle Logout action .handleLogout, // Handle Login action .handleLogin,
Connect
connect method is part of react-redux library that allows you to connect your react components with redux store.
You can use
connected
method for implicit type resolution.
// Map store object to component props // Map actions to component props
Example
react-material-demo (Not up to date)
License
MIT