Как исправить ошибку в своей реализации redux?
11.08.2019, 13:42. Показов 896. Ответов 0
Всем привет. У меня не есть самостоятельная реализация redux (разбираюсь с чужим кодом). И у меня возникла следующая проблема.
| JavaScript | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
| import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
// Начну по порядку. Ниже приведены функции createStore, connect, Provider
const createStore = (reducer, initialState) => {
let currentState = initialState
const listeners = []
const getState = () => currentState
const dispatch = action => {
currentState = reducer(currentState, action)
listeners.forEach(listener => listener())
}
const subscribe = listener => listeners.push(listener)
return { getState, dispatch, subscribe }
}
const connect = (mapStateToProps, mapDispatchToProps) =>
Component => {
class WrappedComponent extends React.Component {
render() {
return (
<Component
{...this.props}
{...mapStateToProps(this.context.store.getState(), this.props)}
{...mapDispatchToProps(this.context.store.dispatch, this.props)}
/>
)
}
componentDidUpdate() {
console.log('componentDidUpdate()')
this.context.store.subscribe(this.handleChange)
}
handleChange = () => {
console.log('handleChange')
this.forceUpdate()
}
}
WrappedComponent.contextTypes = {
store: PropTypes.object,
}
return WrappedComponent
}
class Provider extends React.Component {
getChildContext() {
return {
store: this.props.store,
}
}
render() {
return React.Children.only(this.props.children)
}
}
Provider.childContextTypes = {
store: PropTypes.object,
}
// Ниже приведены actions, action creators, reducers
// actions
const CHANGE_INTERVAL = 'CHANGE_INTERVAL'
// action creators
const changeInterval = value => ({
type: CHANGE_INTERVAL,
payload: value,
})
// reducers
const reducer = (state, action) => {
switch(action.type) {
case CHANGE_INTERVAL:
return {
...state,
currentInterval: state.currentInterval + action.payload
}
default:
return state
}
}
// Далее компонент, которые будет отрендерен
class IntervalComponent extends React.Component {
render() {
console.log('render()')
console.log(this.props)
return (
<div>
<span>Интервал обновления секундомера: {this.props.currentInterval} сек.</span>
<span>
<button onClick={() => this.props.changeInterval(-1)}>-</button>
<button onClick={() => this.props.changeInterval(1)}>+</button>
</span>
</div>
)
}
}
const Interval = connect((state) => ({
currentInterval: state,
// currentInterval: state.currentInterval,
}),
dispatch => ({
changeInterval: value => dispatch(changeInterval(value))
}))(IntervalComponent)
// init
ReactDOM.render(
<Provider store={createStore(reducer)}>
<Interval />
</Provider>,
document.getElementById('root')
) |
|
В данном примере очевидная проблема, что не передается initialState
Что сделал я: в reducer дописал: state = initialState, ну и конечно описал initialState
| JavaScript | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| const initialState = {
currentInterval: 3000
}
// reducers
const reducer = (state = initialState, action) => {
console.log('state', state)
console.log('action', action)
switch(action.type) {
case CHANGE_INTERVAL:
return {
...state,
currentInterval: state.currentInterval + action.payload
}
default:
return state
}
} |
|
Остались две проблемы:
- initialState нет при инициализации компонента
- И когда reducer обновляет состояние, не происходит render IntervalComponent, соответственно визуально ничего не меняется.
Буду благодарен любой помощи.
Если даже написать action для получения данных при инициализации компонента, то не происходит вызова render в компоненте при изменении store:
| JavaScript | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
| import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import App from './App';
import './index.css';
const initialState = {
currentInterval: 3000
}
const createStore = (reducer, initialState) => {
let currentState = initialState
const listeners = []
const getState = () => currentState
const dispatch = action => {
currentState = reducer(currentState, action)
listeners.forEach(listener => listener())
}
const subscribe = listener => listeners.push(listener)
return {getState, dispatch, subscribe}
}
const connect = (mapStateToProps, mapDispatchToProps) =>
Component => {
class WrappedComponent extends React.Component {
render() {
return (
<Component
{...this.props}
{...mapStateToProps(this.context.store.getState(), this.props)}
{...mapDispatchToProps(this.context.store.dispatch, this.props)}
/>
)
}
componentDidUpdate() {
console.log('componentDidUpdate()')
this.context.store.subscribe(this.handleChange)
}
handleChange = () => {
console.log('handleChange')
this.forceUpdate()
}
}
WrappedComponent.contextTypes = {
store: PropTypes.object,
}
return WrappedComponent
}
class Provider extends React.Component {
getChildContext() {
return {
store: this.props.store,
}
}
render() {
return React.Children.only(this.props.children)
}
}
Provider.childContextTypes = {
store: PropTypes.object,
}
// actions
const FETCH_INITIAL_STATE = 'FETCH_INITIAL_STATE'
const CHANGE_INTERVAL = 'CHANGE_INTERVAL'
// action creators
const fetchInitialState = () => ({
type: FETCH_INITIAL_STATE
})
const changeInterval = value => ({
type: CHANGE_INTERVAL,
payload: value,
})
// reducers
const reducer = (state = initialState, action) => {
console.log('state', state)
console.log('action', action)
switch (action.type) {
case FETCH_INITIAL_STATE:
return state
case CHANGE_INTERVAL:
return {
...state,
currentInterval: state.currentInterval + action.payload
}
default:
return state
}
}
// components
class IntervalComponent extends React.Component {
componentDidMount() {
console.log('componentDidMount()')
this.props.fetchInitialState()
console.log('props', this.props)
}
render() {
console.log('render()')
console.log(this.props)
return (
<div>
<span>Интервал обновления секундомера: {this.props.currentInterval} сек.</span>
<span>
<button onClick={() => this.props.changeInterval(-1)}>-</button>
<button onClick={() => this.props.changeInterval(1)}>+</button>
</span>
</div>
)
}
}
const Interval = connect((state) => ({
currentInterval: state,
// currentInterval: state.currentInterval,
}),
dispatch => ({
changeInterval: value => dispatch(changeInterval(value)),
fetchInitialState: value => dispatch(fetchInitialState()),
}))(IntervalComponent)
// init
ReactDOM.render(
<Provider store={createStore(reducer)}>
<Interval/>
</Provider>,
document.getElementById('root')
) |
|
0
|
(
