У меня есть массив данных, который загружается в состояние redux, когда компонент Main загружается в поле Data, и у меня есть английский язык приложения по умолчанию, который также хранится в состоянии redux, если я нажму на кнопку, чтобы запустить действие setLanguage, оно будет измените язык, но он также очистит массив данных.
Как я могу предотвратить опорожнение массива данных при изменении языка?
сокращение
data: []
language: english
Main.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;
Header.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;
combReducers.js
const rootReducer = combineReducers({
language: languageReducer,
data: dataReducer
});
export default rootReducer;
Да, я обновил вопросы
Я считаю, что это связано с dataReducer, поскольку если я изменяю формат, он сохраняет данные, но отображает их неправильно в redux
Я думаю, что вы правильно задали свой вопрос, но я действительно рекомендую поместить его в код или что-то подобное - так на него будет намного легче ответить. И процесс помещения его в код и воспроизведение ошибки поможет вам отладить ее.
У меня аналогичная проблема, я использую Immutable.js для управления данными.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Я изменил dataReducer, теперь он хранит данные и не исчезает при срабатывании действия SET_LANGUAGE
const dataReducer = (state = [], action) => {
switch (action.type) {
case 'FETCH_DATA':
return {
...state,
data: action.payload
};
default:
return state;
}
}
У меня аналогичная проблема, не могли бы вы сказать мне, в чем разница между вашим старым и новым кодом?
Используете ли вы combReducers для объединения обоих редукторов?