1.0.1 • Published 8 years ago
react-state-redux v1.0.1
React State Redux
Clear away states from React components.
Note: The name of this project is temporary yet.
Description
It helps us move states to the Redux store from React components, especially when your components is dynamically used in many places.
Example
Suppose we have a simple textfield component like this:
import React, { Component } from 'react'
export default class TextField extends Component {
constructor(props) {
super(props)
this.state = {
value: ""
}
}
handleChange(event) {
this.setState({value: event.target.value})
}
render() {
return <div>
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
</div>
}
}
We can rewrite it as a stateless component like this:
import React from 'react'
import { connect } from 'react-state-redux'
const mapStateToProps = (state, componentState) => ({
value: componentState
})
function componentReducer(state = "", { type, payload }) {
switch (type) {
case 'CHANGE':
return payload
default:
return state
}
}
const TextField = ({ value, dispatchToThis }) => <div>
<input
type="text"
value={value}
onChange={(event) => dispatchToThis({type: 'CHANGE', payload: event.target.value})}
/>
</div>
export default connect(mapStateToProps)(TextField, componentReducer)
Installation
npm install --save react-state-redux
Tutorial
import { Provider } from 'react-redux'
import { reactStateReduxReducer } from 'react-state-redux'
// Add the reducer to your store on the `reactStateRedux` key
const store = createStore(
combineReducers({
...reducers, // Your reducers
reactStateRedux: reactStateReduxReducer
})
)
// Prepare a component.
const MyComponent = ({ dispatch, dispatchToThis, componentState }) => <div>
<DoSomething />
</div>
// Prepare a reducer to handle actions and return a component state.
function componentReducer(componentState = initialState, action) {
switch (action.type) {
case 'SOMETHING':
return doSomething(componentState)
default:
return componentState
}
}
// Connect to a Redux store and a component state.
const ConnectedMyComponent = connect(
(state, componentState) => ({ componentState })
)(MyComponent, componentReducer)
// Use the connected component.
ReactDOM.render(
<Provider store={store}>
<ConnectedMyComponent />
</Provider>,
node
)
API
Please see React Redux API if you have not done.
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]) => (component, componentReducer) => connectedComponent
mapStateToProps(state, componentState, [ownProps]) => stateProps
state
The same asReact Redux
's onecomponentState
The state of the componentownProps
The same asReact Redux
's one
mapDispatchToProps(dispatch, dispatchToThis, [ownProps]) => dispatchProps
dispatch
The same asReact Redux
's onedispatchToThis
The function to dispatch an action to the component onlyownProps
The same asReact Redux
's one
mergeProps
and options
They will be passed to the React Redux's connect
directly.
component
A React component you want to connect to a Redux store and a component state.
componentReducer(componentState, action): newComponentState
A reducer to handle actions which is dispatched by dispatchToThis
from the component
and dispatch
from anywhere.
License
MIT