iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 17
0
自我挑戰組

請你當我的好朋友吧!ReactJS!系列 第 17

【DAY 17】利用redux與react搭配在做出一個to do list吧!(下)

【前言】
  最近工作不順到覺得很挫折、壓力也很大,我覺得Redux跟我不是好朋友了。這不是我想的這樣啊(哭,繼續加油對自己打氣吧!

【正文】
  昨天把container component做完了,今天就比較簡單地把剩下的component接起來吧!

  • App.js
import React from 'react';
import { connect } from 'react-redux';
import { addTodo } from '../../actions';

 class AddTodoComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
	}
	
  render() {
		const { dispatch } = this.props;
		return(
			 <div>
        <form onSubmit={e => {
          e.preventDefault()
          if (!this.inputRef.current.value.trim()) {
            return
          }
          dispatch(addTodo(this.inputRef.current.value))
          this.inputRef.current.value = ''
        }}>
          <input ref={this.inputRef} />
          <button type="submit">Add Todo</button>
        </form>
      </div>
		)
	}
}

const AddTodo = connect()(AddTodoComponent);

export default AddTodo;
  • index.js
import React from 'react';
import { render } from 'react-dom';
// react-redux的Provider可以讓我們將store裡面的值傳給所有container component
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import todoApp from './Redux/reducers';
import App from './Redux/components/presentional/App.js';

const store = createStore(todoApp);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

上一篇
【DAY 16】利用redux與react搭配在做出一個to do list吧!(中)
下一篇
【DAY 18】更快的撰寫action跟reducer吧!redux-actions參上
系列文
請你當我的好朋友吧!ReactJS!30

尚未有邦友留言

立即登入留言