[英]how to set a loading state for react js with redux
i'm using redux and i want to show an loading state for my app whenever my app is catching data from api and whenever i have an data of null in my reducers
我试过这个,但我没有加载文本
if (this.props.isSignedIn === true) {
return <div
style={{ textAlign: "right" }}>
<Link to='/streams/new' className='ui button primary'>
create new stream
</Link>
</div>
}
if (this.props.isSignedIn === false) {
return <div style={{ fontSize: '30px' }}>Not a user? sign in now, it's free </div>
}
if (this.props.isSignedIn ===null) {
<div>loading...</div>
}
}
这是连接和mapstatetoprops
function
const mapStateToProps = state => {
return {
streams: Object.values(state.streams),
userId: state.auth.userId,
isSignedIn: state.auth.isSignedIn
};
};
export default connect(
mapStateToProps,
{ fetchStreams }
)(StreamList);
这是减速机
import { SIGN_IN, SIGN_OUT } from '../actions/types';
const INTIAL_STATE = {
isSignedIn: null,
userId: null
};
export default (state = INTIAL_STATE, action) => {
switch (action.type) {
case SIGN_IN:
return { ...state, isSignedIn: true, userId: action.payload };
case SIGN_OUT:
return { ...state, isSignedIn: false, userId: null };
default:
return state;
}
};
这是动作
export const signIn = userId => {
return {
type: SIGN_IN,
payload: userId
};
};
export const signOut = () => {
return {
type: SIGN_OUT
};
};
通常通过在商店设置“加载”属性并添加额外的操作(例如“SIGN_INIT”)来完成
所以你的减速器看起来像这样:
const INTIAL_STATE = {
isSignedIn: null,
loading: false,
userId: null
};
export default (state = INTIAL_STATE, action) => {
switch (action.type) {
case SIGN_INIT:
return { ...state, loading: true };
case SIGN_IN:
return { ...state, isSignedIn: true, loading: false, userId: action.payload };
case SIGN_OUT:
return { ...state, isSignedIn: false, loading: false, userId: null };
default:
return state;
}
};
因此,当您尝试登录或注销时,首先您发送 SIGN_INIT 将“加载”设置为 true。 每当请求完成时,SIGN_IN\SIGN_OUT 操作将在商店中更新您的“加载”道具,并且将通知组件加载完成。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.