redux 中间件

//actions.js

import {

FILEMS

} from './constants';

// 利用action来修改状态

export const Filems = (filems)=>{

return {type:FILEMS,filems};

};

//constants.js

export const FILEMS = 'FILEMS';

reducer.js

import {combineReducers } from 'redux'

import reducerFilem from './reducerFilem';

const reducers = combineReducers({

reducerFilem

});

export default reducers;

//reducerFilem.js

import {FILEMS} from './constants'

// 1.定义一个状态（数据）

let initialState = {

filem:[]

}

// 利用reducer将store和action串联起来

function reducerFilem(state = initialState, action){

switch(action.type){

case FILEMS:

return {

filem:action.filems

};

default:

return state;

}

}

export default reducerFilem

//store.js

import { createStore,applyMiddleware } from 'redux'

import reducers from './reducer'

import thunk from 'redux-thunk'

// 利用store来保存状态（state）

const store = createStore(reducers , applyMiddleware(thunk))

export default store

//actionCreators.js

import axios from 'axios'

import { Filems } from './action'

export const getFilems=()=>{

return (dispatch)=>{

axios({

url: 'https://m.maizuo.com/gateway?cityId=310100&ticketFlag=1&k=3203261',

method: 'get',

headers: {

'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16553434931479453024714753","bc":"310100"}',

'X-Host': 'mall.film-ticket.cinema.list'

}

}).then(

res => {

if (res.status === 200) {

dispatch(Filems(res.data.data.cinemas));

}

}

).catch(

err => console.error(err)

)

}

}
 

//Rudexpage.js

import store from '../redux/store'

import React,{useEffect,useState} from 'react'

import {getFilems} from '../redux/actionCreators'

function Rudexpage() {

const [filem,setFilem] =useState(store.getState().reducerFilem.filem)

useEffect(()=>{

store.subscribe(()=>{

setFilem(store.getState().reducerFilem.filem)

})

const action = getFilems()

store.dispatch(action);

},[])

return (

<div>

<ul>

{

filem.map(item=>

<li key={item.cinemaId}>{item.name}</li>

)

}

</ul>

</div>

);

}

export default Rudexpage;