Skip to content

Latest commit

 

History

History
61 lines (48 loc) · 1.45 KB

Quickstart.md

File metadata and controls

61 lines (48 loc) · 1.45 KB

Quickstart

npm i redux-rest-resource --save
  1. Export created types, actions and reducers (eg. in containers/Users/store/index.js)
import {createResource} from 'redux-rest-resource';

const hostUrl = 'https://api.mlab.com:443/api/1/databases/sandbox/collections';
const apiKey = 'xvDjirE9MCIi800xMxi4EKeTm8e9FUBR';

export const {types, actions, rootReducer} = createResource({
  name: 'user',
  url: `${hostUrl}/users/:id?apiKey=${apiKey}`
});
  1. Import reducers in your store
import {combineReducers} from 'redux';
import {rootReducer as usersReducer} from 'containers/Users/store';
export default combineReducers({
  users: usersReducer
});
  1. Use provided actions inside connected components
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {actions as userActions} from 'containers/Users/store';
import UserListItem from './UserListItem';

class UserList extends Component {
  componentDidMount() {
    const {actions} = this.props;
    actions.fetchUsers();
  }

  render() {
    const {actions, users} = this.props;
    return <ul>{users.map(user => <UserListItem key={user.id} user={user} {...actions} />)}</ul>;
  }
}

export default connect(
  // mapStateToProps
  state => ({users: state.users.items}),
  // mapDispatchToProps
  dispatch => ({
    actions: bindActionCreators({...userActions}, dispatch)
  })
)(UserList);

Next, You can check usage examples