https://github.com/jayphelps/react-redux-transaction

https://github.com/jayphelps/react-redux-transaction

Last synced: 21 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/jayphelps/react-redux-transaction
• Owner: jayphelps
• License: mit
• Created: 2016-05-31T16:52:26.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-07-12T20:56:49.000Z (over 8 years ago)
• Last Synced: 2024-10-12T08:12:16.302Z (26 days ago)
• Language: JavaScript
• Size: 15.6 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-redux-transaction (alpha)

As of now, this is just an experiment. React helpers for redux-transaction.

##### Post.js

```js

import { model } from 'react-redux-transaction';

import { fetchPost } from '../actions';

const Post = ({ id, title, transaction: { isPending, error } }) => (

  


    


      {isPending

        ? 'Loading...'

        : error

          ? 'ERROR: ' + error.message

          : title

      }

    

  

);


export default model({

  mapStateToActionProps: (state, props) => ({ id: props.params.id }),

  mapActionPropsToAction: ({ id }) => fetchPost(id),

  mapStateToProps: (state, props) => ({ ...state.postsById[props.params.id] })

})(Post);

```

##### actions.js

```js

import { pend, fulfill, reject, cancel } from 'redux-transaction';

// Example using redux-thunk or similar

export const fetchPost = id =>

  dispatch => {

    // the action POJO is used as a handle to fulfill/reject/cancel that

    // transaction later

  	const pendingAction = dispatch(pend({ type: 'FETCH_POST', payload: { id } }));

    // fake AJAX

  	setTimeout(() => {

  	  // dispatch(fulfill(pendingAction, { id, title: 'Example post' }));

  	  dispatch(reject(pendingAction, { message: 'THE SERVER HATES YOU' }));

  	}, 2000);

	

	// return the pending action so that the @model() decorator

	// can automatically cancel() it on props change/unmount

  	return pendingAction;

  };

```

##### rootReducer.js

```js

const post = (state = { id: null, title: null }, action) => {

  switch (action.type) {

    case 'FETCH_POST':

    case 'FETCH_POST_FULFILLED':

      return {

        ...state,

        ...action.payload

      };

    default:

      return state;

  }

};

const postsById = (state = {}, action) => {

  switch (action.type) {

    case 'FETCH_POST':

    case 'FETCH_POST_FULFILLED':

      const { id } = action.payload;

      return {

        ...state,

        [id]: post(state[id], action)

      };

    default:

      return state;

  }

};

export default combineReducers({

  postsById

});

```

##### index.js

```js

import thunk from 'redux-thunk';

import { reducerEnhancer } from 'redux-transaction';

const store = createStore(

  reducerEnhancer(rootReducer),

  applyMiddleware(thunk)

);

// etc...

```