파트 2: React-Redux
설치
//create new react app
$ npm install -g create-react-app
$ create-react-app < APP-NAME >
//(optional) install Yarn
$ npm install --global yarn
//install redux
$ npm install redux
$ npm install react-redux
유용한 도구
Redux DevTools,
https://github.com/zalmoxisus/redux-devtools-extension
반응 개발자 도구,
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=ko
각 라이브러리에 대한 간단한 설명
'redux'에서 { createStore } 가져오기
import { createStore } from 'redux'
createStore(reducer, [preloadedState], [enhancer])
저장소를 만들고 해당 저장소를 반환합니다. createStore 또는 reducer에 대한 자세한 내용은 내 첫 번째 블로그를 사용하십시오.
링크:
'react-redux'에서 { 공급자 } 가져오기
구성 요소를 사용하면 모든 하위 구성 요소에서 Redux 저장소를 사용할 수 있습니다. 즉, 모든 구성 요소에서 저장 및 디스패치 작업에 액세스할 수 있습니다. 하위 구성 요소에 소품으로 저장소를 전달할 수 있다고 간단히 생각할 수 있습니다. 대부분의 경우 모든 사람이 저장소에 액세스할 수 있도록 최상위 수준에서 렌더링됩니다.
import { Provider } from 'react-redux'
<Provider store={store}>
</Provider>,
)
'react-redux'에서 {연결} 가져오기
구성 요소의 어딘가에 있는 저장소에 액세스하려면 이 연결을 사용해야 합니다.
import { connect } from 'react-redux';
export default connect(mapStateToProps, mapDispatchToProps)(ComponentName);
connect(): React 컴포넌트를 Redux 스토어에 연결하는 함수입니다.
mapStateToProps(mapState라고도 함): 함수는 state라는 첫 번째 인수, 선택적으로 ownProps라는 두 번째 인수를 취하고 구성 요소의 소품이 되는 일반 객체를 반환합니다.
이 함수는 connect()의 첫 번째 인수로 전달되며 connect()가 실행될 때 현재 상태를 mapStateToProps로 전달합니다.
const mapStateToProps = (state) => ({ characters: state.characters })
mapDispatchToProps: 함수, 객체 또는 제공되지 않음(null)일 수 있습니다. 이 함수는 개체를 반환해야 합니다. 상점에 조치를 발송하는 데 사용됩니다.
이 함수는 connect()의 두 번째 인수로 전달됩니다.
const mapDispatchToProps = (dispatch) => {
return {
createCharacter: (character) => dispatch({ type: 'CREATE_CHARACTER', character }),
}
}
알아두면 좋은 것들!
이 세 코드는 서로 동일합니다.
//three different code is equivalent to each other
export default connect(mapStateToProps, mapDispatchToProps)(ComponentName);
export default connect(mapStateToProps, { createCharacter })(ComponentName);
export default connect(state => ({ characters: state.characters }), { createCharacter })(ComponentName);
코딩에 빠져보세요!
위에서 논의한 내용을 사용하여 캐릭터를 생성하고 생성된 캐릭터 목록을 표시할 수 있는 간단한 앱을 만들어 봅시다.
구성 요소 트리(src 아래에 폴더 및 파일 생성)
index.js 수정
index.js에서 스토어를 생성하고 해당 스토어를 앱의 하위 구성 요소에서 사용할 수 있도록 제공자 인수로 사용했습니다.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux'; //add
import { createStore } from 'redux'; //add
import charactersReducer from "./reducers/charactersReducer"; //add
const store = createStore(charactersReducer); //add
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
App.js
import './App.css';
import CharacterForm from './components/CharacterForm';
import Characters from './containers/Characters';
function App() {
return (
<div className="App">
<h1>Welcome to Character Storage</h1>
<CharacterForm />
<Characters />
</div>
);
};
export default App;
감속기/문자 Reducer.js
감속기에 대한 자세한 내용은 제 1부: redux? 블로그.
링크:
export default function charactersReducer(state={characters: []}, action) {
switch(action.type){
case "CREATE_CHARACTER":
return {
...state,
characters: [...state.characters, action.character]
}
default:
return state
}
}
컨테이너/Characters.js
문자 배열을 포함하는 저장소에 액세스하기 위해 여기에서 첫 번째 인수 mapStateToProps와 함께 connect()를 사용했습니다. 그런 다음 해당 문자 배열을 맵 메서드와 함께 사용하여 하위 구성 요소 문자에 소품으로 문자를 전달했습니다.
import React, { Component } from 'react'
import Character from '../components/Character'
import { connect } from 'react-redux';
class Characters extends Component {
render() {
const characters = this.props.characters.map(character => <Character character={character}/>);
return (
<div>
<h1>Character list</h1>
{characters}
</div>
);
};
};
const mapStateToProps = (state) => {
return{
characters: state.characters
};
};
export default connect(mapStateToProps)(Characters);
구성 요소/Character.js
function Character(props){
return (
<div className="character">
<h1>{props.character.name}</h1>
<img src={props.character.image_url} alt={props.character.name} height="400" width="800"/>
<h3>Description: {props.character.description}</h3>
</div>
);
}
export default Character;
구성 요소/CharacterForm.js
작업을 발송하기 위해 스토어에 액세스하기 위해 여기서도 connect()를 사용했습니다. 일단 양식을 제출합니다. 그것은 새로운 문자를 this.state로 전달하는 createCharacter(this.state)를 발송하는 handleSubmit 함수를 호출하여 최종적으로 해당 새 문자를 state.characters 배열에 추가합니다.
import React, { Component } from 'react';
import { connect } from 'react-redux';
class CharacterForm extends Component{
state={
name: "",
image_url: "",
description: ""
};
handleChange=(e)=>{
this.setState({
[e.target.name]: e.target.value
});
};
handleSubmit=(e)=>{
e.preventDefault();
this.props.createCharacter(this.state);
this.setState({
name: "",
image_url: "",
description: ""
});
}
render(){
return (
<div>
<form onSubmit={this.handleSubmit}>
<h1>Create New Character</h1>
Name: <input type="text" name="name" value={this.state.name} onChange={this.handleChange}/><br />
Image_url: <input type="url" name="image_url" value={this.state.image_url} onChange={this.handleChange}/><br />
Description: <textarea name="description" value={this.state.description} onChange={this.handleChange}/><br />
<input type = "submit" value = "Create New Character" />
</form>
</div>
);
};
};
const mapDispatchToProps = (dispatch) => {
return {
createCharacter: (character) => dispatch({ type: 'CREATE_CHARACTER', character }),
}
}
export default connect(null, mapDispatchToProps)(CharacterForm);
여기에 모든 것이 있으므로 Visual Studio에서 시도해 보시지 않겠습니까? Marvel 웹사이트를 사용하여 새 캐릭터를 추가할 수 있습니다.
링크: https://www.marvel.com/characters
참조
https://react-redux.js.org/using-react-redux/connect-mapstate
https://react-redux.js.org/using-react-redux/connect-mapdispatch
Reference
이 문제에 관하여(파트 2: React-Redux), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/cicada0315/part-2-redux-react-1lp텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
