-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathredux-setup.js
More file actions
80 lines (63 loc) · 1.58 KB
/
redux-setup.js
File metadata and controls
80 lines (63 loc) · 1.58 KB
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
// App.js
// Wrap your App in Provider with store
import { Provider } from 'react-redux';
import store from './store';
<Provider store={store}>
<App />
</Provider>;
// store
// setup store, pass in your reducer
import { createStore } from 'redux';
import name_of_reducer_here from '../reducers';
const store = createStore(
name_of_reducer_here,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
export default store;
// reducer
import { NAME_OF_TYPE } from "../actions/types";
const initialState = {
whatever: 'goes here'
};
const name_of_reducer_here = (state = initialState, action) => {
switch (action.type) {
case NAME_OF_TYPE:
return {
...state,
count: action.payload
};
default:
return state;
}
};
export default name_of_reducer_here;
// action types
// define your types as variables
export const NAME_OF_TYPE = 'NAME_OF_TYPE';
// actions
// set up actions using type variables, run logic in your actions
import { NAME_OF_TYPE } from './types';
export const name_of_action_here = count => {
return {
type: NAME_OF_TYPE,
payload: count + 1
};
};
// linking components
import { connect } from "react-redux";
import { name_of_action_here } from "../actions";
nameYourMethod = () => {
this.props.name_of_action_here(this.props.whatever);
};
<button onClick={this.nameYourMethod}>Do A Thing</button>
const mapStateToProps = state => {
return {
whateverYouWant: state.whateverYouWant
};
};
export default connect(
mapStateToProps,
{
name_of_action_here
}
)(ComponentNameHere);