Intro:
Привет, я хотел бы создать хранилище Redux, которое содержит значение "bool" из моего компонента. Я попытался консоль журнала "состояние" в Bool. js, и это работает нормально. Когда я исследую состояние с помощью devtools, ничего не появляется.
// file: src/index.js
import React from 'react';
import ReactDOM from "react-dom";
import {createStore} from 'redux'
import {Provider} from 'react-redux'
import Bool from './Standalone/Bool';
import Reducer_bool from './Reducer_bool'
const store = createStore(
Reducer_bool, + window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
ReactDOM.render (
<Provider
store={store}>
<h3>{JSON.stringify(store)}</h3>
<Bool/>
</Provider>,
document.querySelector("#root")
)
// file: src/Reducer_bool.js
const initialState = {
bool : 'and'
}
const Reducer_bool = (state=initialState, action) => {
switch(action.type) {
case 'HANDLE_BOOL_CHANGE':
return action.payload;
default:
return state;
}
};
export default Reducer_bool
// file: src/Standalone/Action_bool.js
export function handleBool(value) {
return ({
type: 'HANDLE_BOOL_CHANGE',
payload: value
});
}
// file: src/Standalone/Bool.js
import React from 'react';
import {connect} from 'react-redux';
import {FormControlLabel, Radio, RadioGroup} from "@material-ui/core";
import {handleBool} from './Action_bool'
export class Bool extends React.Component {
render() {
return(
<div>
<RadioGroup
value={this.props.bool}
onChange={(evt) => this.props.handleBool(evt.target.value)}>
<FormControlLabel
value="and"
control={<Radio
color="primary"/>}
label="And"/>
<FormControlLabel
value="or"
control={<Radio
color="primary"/>}
label="Or"/>
</RadioGroup>
</div>
)
};
}
function mapStateToProps(state) {
return {
bool: state
}
}
export default connect(mapStateToProps, {handleBool})(Bool);
Проблема:
Нет ошибок или предупреждений, но состояние всегда пустое (я даже не знаю, если оно начинается или нет). Не могли бы вы мне помочь? Большое спасибо!