Redux and redux saga

  • Published on
    21-Feb-2017

  • View
    33

  • Download
    1

Transcript

Redux and Redux saga

,help@birdsfree.com

Redux ? . Action, Reducer , Store

-Action: e.g: { type: , : .., .. } type . ( )

, Action-Action: e.g: { type: , : .., .. } type . ( ) Type safe type . type key,value key

, Reducer state state . state {myName : im crazy } {myName:im not crazy yourName:you are crazy} reducer . . ( redux ). export const request = (state: Object) => state.merge({ fetching: true }) state fetching (state:Object) .

, Reducer ,export const reducer = createReducer(INITIAL_STATE, { [Types.LOGIN_REQUEST]: request, [Types.LOGIN_SUCCESS]: success, [Types.LOGIN_FAILURE]: failure, [Types.LOGOUT]: logout})

action . Types.LOGIN_REQUEST action { type: login_request_unique} . key,value .

, ActionCreater (redux/LoginRedux.js ) .export const reducer = createReducer(INITIAL_STATE, { [Types.LOGIN_REQUEST]: request, [Types.LOGIN_SUCCESS]: success, [Types.LOGIN_FAILURE]: failure, [Types.LOGOUT]: logout})

Types.LOGIN_REQUEST library .(/Redux/LoginRedux.js )import { createReducer, createActions } from 'reduxsauce' createActions .

, ActionCreater const { Types, Creators } = createActions({ loginRequest: ['username', 'password'], loginSuccess: ['username'], loginFailure: ['error'], logout: null})export const LoginTypes = Typesexport default Creators

createAction Types.LOGIN_REQUEST Action , createActions loginRequest:[username,password] Types.LOGIN_REQUEST ={ type: loginRequest username: password:} . .

storestore . reducer action export const reducer = createReducer(INITIAL_STATE, { [Types.LOGIN_REQUEST]: request, [Types.LOGIN_SUCCESS]: success, [Types.LOGIN_FAILURE]: failure, [Types.LOGOUT]: logout}) : . createReducer , INITIAL_STATE .

storestore . reducer action (redux/LoginRedux.js )export const reducer = createReducer(INITIAL_STATE, { [Types.LOGIN_REQUEST]: request, [Types.LOGIN_SUCCESS]: success, [Types.LOGIN_FAILURE]: failure, [Types.LOGOUT]: logout}) : . createReducer , INITIAL_STATE .

store reducer , store .export default () => { /* ------------- Assemble The Reducers ------------- */ const rootReducer = combineReducers({ temperature: require('./TemperatureRedux').reducer, login: require('./LoginRedux').reducer, search: require('./SearchRedux').reducer, })

return configureStore(rootReducer, rootSaga)}

store store (dispatch .) store rootReducer , Reducer .!!

Redux End!!

Redux saga .