//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;
