Saga redux sample

index-1.js

// App/redux/index.js

import { combineReducers } from 'redux'
import configureStore from './CreateStore'
import rootSaga from '../Sagas/'

export default () => {

  /* ------------- Assemble The Reducers ------------- */
  const rootReducer = combineReducers({
    user: require('./UserRedux').reducer
  })

  return configureStore(rootReducer, rootSaga)
}

index-2.js

import { takeLatest } from 'redux-saga/effects'
import API from '../Services/Api'
import FixtureAPI from '../Services/FixtureApi'
import DebugConfig from '../Config/DebugConfig'

/* ------------- Types ------------- */
import { UserTypes } from '../Redux/UserRedux'

/* ------------- Sagas ------------- */
import { login } from './LoginSagas'

/* ------------- API ------------- */
const api = DebugConfig.useFixtures ? FixtureAPI : API.create()

/* ------------- Connect Types To Sagas ------------- */
export default function * root () {
  yield [
    takeLatest(UserTypes.LOGIN_REQUEST, loginUser)
  ]
}

Sagas-redux.md

redux test

Sample of how to use redux:

Ignite generate reducer

will generate App/Redux/UserRedux.js will generate App/Sagas/UserSagas.js

# init reducer
ignite generate redux user

# init sagas
ignite generate saga user

App/Redux/UserRedux.js

The reducer, will store username

App/Container/SomeScreen.js

The screen that will use the reducer

App/redux/index.js

Don't forget to add reducer to redux index.js

App/Sagas/UserSagas.js

make ajax call api

SomeScreen.js

// App/Container/SomeScreen.js

import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { Text, View } from 'react-native'
import I18n from 'react-native-i18n'

import UserActions from '../Redux/UserRedux'

class SomeScreen extends React.Component {
  static propTypes = {
    getUser: PropTypes.func
  }

  someHandler = () => {
    this.props.getUser()
  }

  render () {
    const { user } = this.props

    return (
      <View>
        <Text>{user && (user.name)}</Text>
      </View>
    )
  }
}

const mapStateToProps = (state) => {
  // look at /App/Redux/index.js
  // we put reducer.user
  // and inside /App/Redux/UserReducer.js
  // success state.user so user.user
  return {
    user: state.user.user
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getUser: (username) => dispatch(UserActions.loginRequest())
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(SomeScreen)

UserRedux.js

// App/Redux/UserRedux.js

import { createReducer, createActions } from 'reduxsauce'
import Immutable from 'seamless-immutable'

/* ------------- Types and Action Creators ------------- */
const { Types, Creators } = createActions({
  loginRequest: [],
  loginSuccess: ['user'],
  loginFailure: ['error']
})

export const UserTypes = Types
export default Creators

/* ------------- Initial State ------------- */
export const INITIAL_STATE = Immutable({
  user: null,
  error: null,
  fetching: false
})

/* ------------- Reducers ------------- */
// we're attempting to login
export const request = (state) => {
  return state.merge({ fetching: true })
}

// we've successfully logged in
export const success = (state, { user }) => {
  return state.merge({ fetching: false, error: null, user })
}

// we've had a problem logging in
export const failure = (state, { error }) =>
  state.merge({ fetching: false, error })

/* ------------- Hookup Reducers To Types ------------- */
export const reducer = createReducer(INITIAL_STATE, {
  [Types.LOGIN_REQUEST]: request,
  [Types.LOGIN_SUCCESS]: success,
  [Types.LOGIN_FAILURE]: failure
})

UserSagas.js

// App/Sagas/UserSagas.js

import { call, put } from 'redux-saga/effects'
import UserActions from '../Redux/UserRedux'

export function * loginUser (api, action) {
  const response = yield call(() => {
    return fetch('https://jsonplaceholder.typicode.com/users/1')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson
    })
    .catch((error) => {
      console.error(error)
    })
  })

  if (response) {
    yield put(UserActions.loginSuccess(response))
  } else {
    yield put(UserActions.loginFailure())
  }
}