图片说明数据流向
- 数据流向：
- 首先，用户发出 Action。
- store.dispatch(action);
- 然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。
- let nextState = todoApp(previousState, action);
- State 一旦有变化，Store 就会调用监听函数。
- // 设置监听函数
- store.subscribe(listener);
- listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。
- function listerner() {
- let newState = store.getState();
- component.setState(newState);
- }
在每个页面中使用配置：
- 1引入react和react-redux的connect方法
- 用class定义组件，在页面底部导出，导出时connect一下
- 并用serverData统一接收：store.xxxState
在每个页面中使用：
- 直接this.props.dispatch(actionCreator( 对应要传递的参数))；
- 这个方法是由对应的业务逻辑的方法执行的，
- 页面首次加载也可放在钩子函数里面
import React from 'react';import { Icon, Tabs, Card, Flex, WingBlank, WhiteSpace } from 'antd-mobile';import { StickyContainer, Sticky } from 'react-sticky';import Mycard from '../../../components/marketCard'import NavBar from '../../../components/topNavBar'import { connect } from 'react-redux';import * as fetchData from '../../../redux/actions/actions_fetchServerData'import RecordTop from '../components/TransactionRecord/RecordTop'import RecordItem from '../components/TransactionRecord/recordItem'import { Helmet } from 'react-helmet'class txRecordPage extends React.Component { constructor(props) { super(props); this.state = { }; this.props.dispatch(fetchData.fetchMyTransactionRecord(null, (ret) => { })) } componentWillMount() { this.props.dispatch(fetchData.fetchMyTransactionRecord(null, (ret) => { })) } componentDidMount() { } render() { const { isLoading, serverError, recordItemData, recordTopData } = this.props.serverData console.log(recordTopData) return ( 交易记录 建立action creator
-
- import * as TYPES from './types'; 引入对应的动作状态
-
- import request from '../../utils/request' 引入获取数据的方法
-
- import config from '../../utils/config' 引入对应的url config
- 在这个里面 ，可以写各种动作类型的action creator, 比如：收藏功能，置顶功能，点击删除功能
//收藏功能export function mineFavorateCollect(id,isCollect){ return (dispatch)=>{ dispatch({ 'type':TYPES.MINE_FAVORATE_UNCOLLECT, 'isCollect':isCollect, 'idValue':id, }) }}//置顶功能export function mineFavorateToTop(idTop,isToTop){ return (dispatch)=>{ dispatch({ 'type':TYPES.MINE_FAVORATE_TOTOP, 'isToTop':isToTop, 'idTop':idTop, }) }} 获取数据方法的文件
- 定义一个从服务器获取数据方法的文件 fetch_data
- 先引入或者定义从服务器fecth数据的方法
- 参数包括：token, url ,fetchType ,callback, fakeData_ needToDelete
- 如下：
function fetchDataFromServer(token, url, fetchType, callback, fakeData_needToDelete) { return (dispatch) => { dispatch({ 'type': fetchType.fetching, }) var params = { 'token': token } fetch(url, { method: 'POST', mode: "no-cors", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(params) }).then((ret) => { dispatch({ 'type': fetchType.received, // 'data': ret, 'data': fakeData_needToDelete }) callback(ret) }).catch((error) => { dispatch({ 'type': fetchType.error, 'data': error }) callback(error) }); }} request.getWithToken = (url, token, callback) => { // console.log('url:' + url); return fetch(url, { method: 'GET', headers: { //header 'Content-Type': 'application/json', 'Authorization': token }, }).then((response) => response.json()) .then((responseData) => { // 上面的转好的json // console.log(responseData); if (responseData.code === '0') { callback({ 'isSuccess': true, "data": responseData.data });//返回成功的交易id } else { callback({ 'isSuccess': false, "data": responseData.msg });//返回错误，一般是充太多了，一般累计不超过1个eth } }).catch((error) => { // console.log(error); // callback({ 'isSuccess': false, "data": "network error!" });//网络连接失败 }); 在action 中：（fetchTypes.js）
- 导出对应的动作和状态的动作
export const FETCH_MY_TRANSACTION_RECORD = { received: "FETCH_TRANSACTION_RECORD_RECEIVED", fetching: "FETCH_TRANSACTION_RECORD_FETCHING", error: "FETCH_TRANSACTION_RECORD_ERROR"} 在reducer中，
- 1引入对应的动作类型
- 2 初始化要得到的变量值的类型
- 3 引入 对应的action type.received or error or fething
- 用swith case 匹配不同的状态，赋值
- 4 如果一个接口请求多个组件的数据，要在这里分别初始化，和根据状态分别赋值；
import * as fetchTypes from '../actions/fetchTypes'const initialState = { isLoading: false, recordItemData:[], recordTopData:[], serverError:false,}export default function Transaction_record_Reducer(state = initialState, action) { switch (action.type) { case fetchTypes.FETCH_MY_TRANSACTION_RECORD.received: console.log( action.data) return { ...state, recordTopData: action.data.recordTopData, recordItemData: action.data.recordItemData, serverError: false, isLoading: false, }; break; case fetchTypes.FETCH_MY_TRANSACTION_RECORD.fetching: return { ...state, serverError: false, isLoading: true, }; break; case fetchTypes.FETCH_MY_TRANSACTION_RECORD.error: return { ...state, serverError: false, isLoading: false, }; break; default: return state; }} 在root reducer中集成进去
import { combineReducers } from 'redux'import myMarketPage from './reducer_myMarketPage'import findPage from './reducer_findPage'const rootReducer = combineReducers({ marketPageState: myMarketPage, findPageState: findPage,})export default rootReducer 在store中，将root reducer 中的数据传入store中
import { createStore, applyMiddleware } from 'redux';import rootReducer from '../reducers/root';import thunk from 'redux-thunk';let createStoreWithMiddleware = applyMiddleware(thunk)(createStore);let store = createStoreWithMiddleware(rootReducer);export default store; 在页面的根组件下，引入react-redux ,并用provider包裹，并将其导出
import React, { Component } from 'react';import Router from './components/framework/router'import store from './redux/store/store'import { Provider } from 'react-redux';class App extends Component { render() { return ( )export default AppWithRedux;