javascript - 触发另一个动作时,处于redux状态的对象消失
问题描述
当组件加载到 Data 字段时,我有一个加载到 redux 状态的数据数组Main
,并且我有一个默认的英语应用程序语言也存储在 redux 状态,如果我点击我的按钮触发setLanguage
操作,它将改变语言,但它也会清空数据数组。
更改语言时如何防止数据数组被清空?
还原
data: []
language: english
主.js
class Main extends React.Component {
componentDidMount() {
this.props.fetchData()
}
render() {
const {language} = this.props
const e = language === 'english'
const p = language === 'polish'
return(
<Wrap>
<Router>
<ScrollToTop>
<Header />
<Wrap>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/reviews" component={Reviews} />
<button onClick={this.props.fetchData}>click</button>
{/* <Route exact path="/reviews/:catId" component={Reviews} />
<Route exact path="/reviews/:catId/:slug" component={Review} /> */}
{/* <Route exact path="/" component={Home} /> */}
{/* <ScrollToTop path="/reviews/:catId" component={Review} /> */}
{/* <ScrollToTop path="/another-page" component={Reviews} /> */}
</Switch>
</Wrap>
</ScrollToTop>
</Router>
</Wrap>
)
}
}
const mapStateToProps = state => ({
language: state.language
});
export default connect(mapStateToProps, actionCreators)(Main);
MainActions.js
import axios from 'axios'
import {
FETCH_DATA
} from '../../Constants'
export function fetchData() {
return dispatch =>
axios
.get('https://jsonplaceholder.typicode.com/users')
.then((response) => {
dispatch({ type: FETCH_DATA, payload: response.data });
})
.catch((err) => {
console.error(err);
});
}
dataReducer.js
import {
FETCH_DATA
} from '../Constants'
const dataReducer = (state = [], action) => {
return{
...state,
data: action.payload
}
}
export default dataReducer;
页眉.js
class Header extends React.Component {
render() {
const {language} = this.props
const e = language === 'english'
const p = language === 'polish'
return (
<Wrapper>
<button onClick={()=>this.props.setLanguage('english')}>english</button>
<button onClick={()=>this.props.setLanguage('polish')}>polish</button>
<div>
{e && <div>language is english</div>}
{p && <div>language is polish</div>}
</Wrapper>
)
}
}
const mapStateToProps = state => ({
language: state.language
});
export default connect(mapStateToProps, actionCreators)(Header);
headerActions.js
import {
SET_LANGUAGE
} from '../../Constants'
export function setLanguage(language) {
return {
type: SET_LANGUAGE,
language
}
}
languageReducer.js
import {
SET_LANGUAGE
} from '../Constants'
const initialState = 'english'
const languageReducer = (state = initialState, action) => {
switch (action.type) {
case SET_LANGUAGE:
action.language
default:
return state;
}
};
export default languageReducer;
combineReducers.js
const rootReducer = combineReducers({
language: languageReducer,
data: dataReducer
});
export default rootReducer;
解决方案
我已经更改了 dataReducer ,它现在存储数据并且在触发 SET_LANGUAGE 操作时不会消失
const dataReducer = (state = [], action) => {
switch (action.type) {
case 'FETCH_DATA':
return {
...state,
data: action.payload
};
default:
return state;
}
}
推荐阅读
- google-calendar-api - 谷歌日历 API + 服务帐户 + PHP cURL
- python - scRNA-seq:如何使用预先计算的 PCA 分数/负载来使用 TSNE python 实现?
- java - java.lang.IllegalStateException:在 android.os.Parcel.readException
- html - css中有没有办法让一个div漂浮在另一个div上但向下滚动时不漂浮
- javascript - Discord js bot connection.play() 不会播放音频文件
- docker - 如何从 docker 网络确定 uvicorn 服务器的 forwarded-allow-ips
- angularjs - Angular 的条件类和静态类
- ios - 尝试设置 Stripe 集成代码时出现 EXC_BAD_ACCESS 错误
- babeljs - @babel/plugin-transform-runtime 允许在 cjs 文件中导入 esm
- python - 将列表元素与元组元素合并