React usa Redux para administrar datos

1. Directorio de archivos

2.estado.js

export default {
	areaIndex: 0,
	token: {
		accessToken: '',
		idToken: '',
		refreshToken: ''
	}
}

3.index.js

Redux proporciona createStoreesta función para generar Store.

createStoreLa función toma otra función como argumento y devuelve el objeto Store recién generado.

import { applyMiddleware, createStore } from 'redux'

// 中间件，用于异步action
import thunk from 'redux-thunk'

// 引入reducer
import reducers from './reducers.js'

// 创建store实例
let store = createStore(
  reducers,
  applyMiddleware(thunk)
)

export default store

4.acciones.js

La acción es un objeto. Uno de typelos atributos es obligatorio, indicando el nombre de la Acción. Otras propiedades se pueden configurar libremente.

store.dispatch()Es la única forma en que View puede emitir una acción.

import Amplify, { Auth } from 'aws-amplify';


//同步action
export const AmplifyConfig = {
  userPoolId: 'us-east-1_JZmBbVIcu',
  userPoolWebClientId: '6agh327ji8qbf7aodopkhsh4o6'
};
Amplify.configure(AmplifyConfig);

export function setAreaIndex (data) {
  return {
    type: 'SET_AREA_INDEX', data
  }
}


//异步action
export function loadToken(username,password) {
  // 用 thunk 中间件解释：
  return function(dispatch, getState) {
    dispatch({
      type: 'TOKEN_REQUEST'
    })
		// 异步分发原味 action
		Auth.signIn(username, password).then(
		response =>{
			let token = response.signInUserSession
			const {accessToken, idToken, refreshToken} = {accessToken: token.accessToken.jwtToken, idToken:token.idToken.jwtToken, refreshToken: token.refreshToken.token}
			token = {accessToken, idToken, refreshToken}
			dispatch({
				type: 'TOKEN_SUCCESS',
				data: token,
			})}
		).catch(error => {
			dispatch({
				type: 'TOKEN_ERROR',
				error,
			})
		})
  }
}

5.reductores.js

Después de que la Tienda reciba la Acción, debe dar un nuevo Estado para que la Vista cambie. Este proceso de cálculo de Estado se llama Reductor.

Un Reductor es una función que toma una Acción y el Estado actual como parámetros y devuelve un nuevo Estado.

import { combineReducers } from 'redux'
// 默认值
import defaultState from './state.js'

// 一个reducer就是一个函数
function areaIndex (state = defaultState.areaIndex, action) {
  // 不同的action有不同的处理逻辑
  switch (action.type) {
    case 'SET_AREA_INDEX':
      return action.data
    default:
      return state
  }
}

function token (state = defaultState.token, action) {
	console.log(action)
  switch (action.type) {
    case 'TOKEN_SUCCESS':
      return action.data
    default:
      return state
  }
}

// 导出所有reducer
export default combineReducers({
    areaIndex,
    token
})

6. Usar el estado en el componente LoginPage

import { connect } from 'react-redux'
import { loadToken, setAreaIndex } from './store/actions.js'

class LoginPage extends Component {
    state = {
		username: '',
		password: '',
	}
    loginAbroad = () => {
        const { setToken, setAreaIndex } = this.props
        setToken(this.state.username,this.state.password)
    }
    ......
}

//将state映射到组件的props中
const mapStateToProps = (state) => {
  return {
    token: state.token,
    areaIndex: state.areaIndex
  }
}

//将dispatch映射到组件的props中
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    setToken: (username,password) => {
        dispatch(loadToken(username,password))
    },
    setAreaIndex: (data) =>  {
        dispatch(setAreaIndex(data))
    }
  }
}

//React-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。
export default connect(mapStateToProps, mapDispatchToProps)(LoginPage)