Name: redux-save
Owner: Legitcode
Description: Full featured middleware for handling async actions and automagically saving data (For RN & Web)
Created: 2015-11-05 20:55:48.0
Updated: 2016-11-09 13:12:16.0
Pushed: 2015-12-04 14:16:25.0
Size: 9
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
Work the same as regular redux, except when you create your store, do it like this:
rt initialState from 'redux-save/web'
t store = createStore(counterApp, initialState('counterApp'))
Pass in a unique name for each store, and redux-save
does the rest.
On the server, you should pass down data to window.__INITIAL_STATE__
if you're using this on the web.
Want to use immutablejs? That's what functions are for:
t store = createStore(counterApp, Immutable.Map(initialState('counterApp')))
npm install redux-react-fetch --save
It's not as complicated as it sounds. There's a bunch of promise-based middleware out there, this one simple expands on that idea. Take a look at redux-fetch. This library is, in my opinion, easier to use and does something awesome, and that's merging. Before we get to that, here's the idea:
If you are writing a lot of promises, chances are you have been checking if requests finish, and adding in some sort of logic to show the user something is wrong. This middleware aims to make doing this a lot easier. I'm hoping more people have ideas on making this even better. My main use case for this is merging in styles and doing css transitions in between state changes.
You can pass in your preferred fetch implementation!
rt { createStore, applyMiddleware } from 'redux'
rt reduxReactFetch from 'redux-react-fetch'
rt fetch from 'isomorphic-fetch'
t createWithMiddleware = applyMiddleware(
duxReactFetch(fetch)
eateStore)
rt function updateTicket(ticketId, type, value){
turn {
type: 'updateArticle',
url: `http://test.com`,
body: {
article_id: ticketId,
title: 'New Title'
},
then: 'updateTicketFinished'
There's some things inferred here:
options
are passed in the action, it will default to the following:t options = {
edentials: 'same-origin',
thod: 'post',
aders: {
'Accept': 'application/json',
'Content-Type': 'application/json'
then
is optional. The same action will be called on success if it is not set. You can set catch
as well.mergeTo
is the key to merge your object to, defaults to body
Now it's the cool part. By default, a style
object is merged into the body
object in your action. When you set the state in your store, you don't need to do anything extra.
'updateArticle':
turn state.update(action.body.article_id, () => {
return action.body
'updateTicketFinished':
rn state.update(action.body.article_id, () => {
turn action.response.result
Still don't get what's cool? Behind the scenes style
(that you can change, you'll see) was added to the result and initial body:
rt React from 'react'
rt default ({title, style}) => (
1 style={style}>{title}</h1>
When you dispatch the action to update the title, it will fade to 0.5 opacity, on response it will fade back to 1. And you didn't have to do anything! Cool right? If you don't like the defaults, here's how to change it. Pass in some stuff to the middleware when you apply it:
t start = {
acity: 0.5,
ansition: 'opacity .5s ease-in-out'
t end = {
acity: 1,
ansition: 'opacity .5s ease-in-out'
t endFail = {
acity: 1,
rder: 'solid red 1px',
ansition: 'opacity .5s ease-in-out'
t createWithMiddleware = applyMiddleware(
duxFetchMerger(fetch, {start, end, endfail})
eateStore)
I'm fairly new to redux, so there may be some things I can improve. I also didn't document everything, hopefully I will soon!
rt function newComment(comment, postId, attachments){
t body = new FormData()
tachments.forEach((file)=> {
body.append('attachments[]', file)
dy.append('user_id', user.id)
dy.append('text', comment.text)
(comment.status) body.append('status_id', comment.status)
turn {
type: 'newComment',
url: `https://test.com`,
body,
comment,
postId,
mergeTo: 'comment',
options: {
credentials: 'same-origin',
method: 'post',
},
then: 'updateLatestComment'