React-Native Redux 설치
React-Native Redux 설치
> npm install redux
> npm install react-redux
설치는 굉장히 간단하다. 하지만 Redux를 처음 접한다면 상당히 어렵다.
Redux를 사용하는 가장 중요한 이유는 컴포넌트들의 상태를 공유하기 위함이다.
아래는 중요한 코드만 적어두겠다.
//**********************************************
******************** App.js ********************
************************************************//
... 생략 ...
import { createStore } from 'redux';
import { Provider } from 'react-redux';
const initialState = {
counter: 0
}
const reducer = (state=initialState, action) => {
switch(action.type){
case ' INCREASE_COUNTER ': {
return{counter:state.counter+1}
}
case 'DECREASE_COUNTER':
return{counter:state.counter-1}
}
return state
}
const store = createStore(reducer)
class App extends React.Component {
render() {
return (
);
}
}
... 생략 ...
//*******************************************************
******************** HomeScreen.js ********************
*******************************************************//
... 생략 ...
import { connect } from 'react-redux';
class HomeScreen extends Component {
render () {
return (
{this.props.counter}
{this.props.increaseCounter()}}>
Increase
);
}
}
const mapStateToProps = state => {
return {
counter: state.counter
}
}
const mapDispatchToProps = dispatch => {
return {
increaseCounter : () => dispatch({type:' INCREASE_COUNTER '}),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen);
... 생략 ...
from http://1gold.tistory.com/45 by ccl(A) rewrite - 2020-03-24 20:54:15
댓글
댓글 쓰기