[英]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 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
i've tried this but i got no loading text我试过这个,但我没有加载文本
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>
}
}
here is connect and mapstatetoprops
function这是连接和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);
and here is reducer这是减速机
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;
}
};
here is actions这是动作
export const signIn = userId => {
return {
type: SIGN_IN,
payload: userId
};
};
export const signOut = () => {
return {
type: SIGN_OUT
};
};
Usually it is done with setting 'loading' property on store and adding an additional action such as 'SIGN_INIT'通常通过在商店设置“加载”属性并添加额外的操作(例如“SIGN_INIT”)来完成
So your reducer will look like this:所以你的减速器看起来像这样:
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;
}
};
So when you try to sign in or out, first you dispatch SIGN_INIT which sets 'loading' to true.因此,当您尝试登录或注销时,首先您发送 SIGN_INIT 将“加载”设置为 true。 Whenever request is finished SIGN_IN\SIGN_OUT actions will have your 'loading' prop updated in store and component will be notified that loading is finished.每当请求完成时,SIGN_IN\SIGN_OUT 操作将在商店中更新您的“加载”道具,并且将通知组件加载完成。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.