I have taken a copy of the boilerplate and I'm having trouble getting the reducer to update the state.
// import { ExampleTypes } from 'App/Stores/Example/Actions'
import { StartupTypes } from 'App/Stores/Startup/Actions'
import { WelcomeTypes } from 'App/Stores/Welcome/Actions'
// import { fetchTemperature } from './ExampleSaga'
import { login } from './WelcomeSaga'
import { startup } from './StartupSaga'
export default function* root() {
yield [
/**
* @see https://redux-saga.js.org/docs/basics/UsingSagaHelpers.html
*/
// Run the startup saga when the application starts
takeLatest(StartupTypes.STARTUP, startup),
// Call `fetchTemperature()` when a `FETCH_TEMPERATURE` action is triggered
// takeLatest(ExampleTypes.FETCH_TEMPERATURE, fetchTemperature),
// Call `login()` when a `LOGIN` action is triggered
takeLatest(WelcomeTypes.LOGIN, login),
]
}
import WelcomeActions from 'App/Stores/Welcome/Actions'
/**
* A saga can contain multiple functions.
*
* This example saga contains only one to fetch the weather temperature.
* Feel free to remove it.
*/
export function* login() {
// Dispatch a redux action using `put()`
// @see https://redux-saga.js.org/docs/basics/DispatchingActions.html
yield put(WelcomeActions.loginLoading())
// Fetch the account from an API
const account = {foo:'bar'}
if (account) {
yield put(WelcomeActions.loginSuccess(account))
} else {
yield put(
WelcomeActions.loginFailure('There was an error while logging in to the app.')
)
}
}
/**
* We use reduxsauce's `createActions()` helper to easily create redux actions.
*
* Keys are action names and values are the list of parameters for the given action.
*
* Action names are turned to SNAKE_CASE into the `Types` variable. This can be used
* to listen to actions:
*
* - to trigger reducers to update the state, for example in App/Stores/Example/Reducers.js
* - to trigger sagas, for example in App/Sagas/index.js
*
* Actions can be dispatched:
*
* - in React components using `dispatch(...)`, for example in App/App.js
* - in sagas using `yield put(...)`, for example in App/Sagas/WelcomeSaga.js
*
* @see https://github.com/infinitered/reduxsauce#createactions
*/
const { Types, Creators } = createActions({
// Login to the game
login: null,
// The login operation has started and is loading
loginLoading: null,
// The login was successfully
loginSuccess: ['account'],
// A login error occurred
loginFailure: ['loginErrorMessage'],
// Register to create an account
register: null,
// The register operation has started and is loading the result
registerLoading: null,
// The registration was successfully
registerSuccess: ['account'],
// A registration error occurred
registerFailure: ['registerErrorMessage'],
// Play with a guest account
playAsGuest: null,
// The register operation has started and is loading the result
playAsGuestLoading: null,
// The registration was successfully
playAsGuestSuccess: ['guestAccount'],
// A registration error occurred
playAsGuestFailure: ['registerErrorMessage'],
})
export const WelcomeTypes = Types
export default Creators
import { Text, View, Button } from 'react-native'
import { connect } from 'react-redux'
import { PropTypes } from 'prop-types'
import WelcomeActions from 'App/Stores/Welcome/Actions'
import Style from './WelcomeScreenStyle'
/**
* This is the welcome screen container component
*
* This screen displays a static image which will be replaced with an animation
* and two buttons, one to login to the game, one to register,
* and one to play the game as a guest
*/
export class WelcomeScreen extends React.Component {
render() {
console.log('this.props.loginIsLoading',this.props.loginIsLoading)
console.log('this.props.account.foo',this.props.account.foo)
let foo = this.props.loginIsLoading ? '...' : this.props.account.foo
console.log('foo',foo)
if (foo === undefined) {
foo = '??'
}
// Render a welcome message and three buttons
return (
// Update with styles object
<View>
<Text id="game-name">Log It</Text>
<Text id="welcome-text">The fun game to play with anyone.</Text>
<Button id="login" onPress={this.props.login} title="Login"/>
<Button id="register" onPress={this.props.register} title="Register"/>
<Button id="play-as-guest" onPress={this.props.playAsGuest} title="Play as guest"/>
<Text>The account foo value is: {foo}</Text>
</View>
)
}
}
WelcomeScreen.propsTypes = {
account: {foo: 'baz'},
loginIsLoading: PropTypes.boolean
}
const mapStateToProps = (state) => ({
account: state.welcome.get('account'),
loginIsLoading: state.welcome.get('loginIsLoading')
})
const mapDispatchToProps = (dispatch) => ({
login: () => dispatch(WelcomeActions.login()),
register: () => dispatch(WelcomeActions.register()),
playAsGuest: () => dispatch(WelcomeActions.playAsGuest()),
})
export default connect(
mapStateToProps,
mapDispatchToProps
)(WelcomeScreen)```