React使用Redux管理数据

1.文件目录

2.state.js

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

3.index.js

Redux 提供createStore这个函数，用来生成 Store。

createStore函数接受另一个函数作为参数，返回新生成的 Store 对象。

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.actions.js

Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置。

store.dispatch()是 View 发出 Action 的唯一方法。

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.reducers.js

Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。

Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。

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.在LoginPage组件中使用state

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)